import type { ReactNode } from 'react' import { Link } from 'react-router-dom' import { ArrowLeft } from 'lucide-react' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { cn } from '@/lib/utils' /** * Shared field grid for create forms. Pages own the
element (its id is * referenced by the footer submit buttons), so the grid lives here as a class * string instead of a wrapper to avoid nesting a grid inside a grid. */ export const createFormGrid = 'grid gap-5 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4' /** Field that reads better at double width (names, addresses). */ export const createFieldWide = 'md:col-span-2' /** Field that should span every column (textareas, checkbox rows). */ export const createFieldFull = 'md:col-span-2 xl:col-span-3 2xl:col-span-4' export function CreatePageLayout({ title, subtitle, backTo, backLabel = 'Back to list', children, footer, className, }: { title: string subtitle?: string backTo: string backLabel?: string children: ReactNode footer?: ReactNode className?: string }) { return (

{title}

{subtitle ?

{subtitle}

: null}
Details {subtitle ? {subtitle} : null} {children} {footer ?
{footer}
: null}
) }