makearmy-app/components/toolkit/ToolShell.tsx
2025-09-22 10:37:53 -04:00

49 lines
1.2 KiB
TypeScript

import Link from "next/link";
import { cn } from "@/lib/utils";
type ToolShellProps = {
title: string;
/** Preferred prop */
description?: string;
/** Back-compat alias used by some pages */
subtitle?: string;
className?: string;
children: React.ReactNode;
backHref?: string;
backLabel?: string;
};
export default function ToolShell({
title,
description,
subtitle,
className,
children,
backHref = "/laser-toolkit",
backLabel = "Back to Toolkit",
}: ToolShellProps) {
const desc = description ?? subtitle;
return (
<div className={cn("mx-auto w-full max-w-5xl px-4 py-6", className)}>
<div className="mb-6 flex items-start justify-between gap-4">
<div>
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
{desc ? (
<p className="mt-1 text-sm text-muted-foreground">{desc}</p>
) : null}
</div>
<Link
href={backHref}
className="inline-flex h-9 items-center rounded-md border border-input bg-background px-3 text-sm shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
>
{backLabel}
</Link>
</div>
{children}
</div>
);
}