cloudflare-domain-manager/apps/web/src/components/form-sheet.tsx

import type { ReactNode } from 'react'
import type { FieldValues, UseFormReturn } from 'react-hook-form'
import { FormProvider } from 'react-hook-form'
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from '@cfdm/ui/components/sheet'
import { cn } from '@cfdm/ui/lib/utils'

interface FormSheetProps<T extends FieldValues> {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: string
  description?: string
  form: UseFormReturn<T>
  onSubmit: (values: T) => void | Promise<void>
  children: ReactNode
  footer?: ReactNode
  className?: string
  contentClassName?: string
}

export function FormSheet<T extends FieldValues>({
  open,
  onOpenChange,
  title,
  description,
  form,
  onSubmit,
  children,
  footer,
  className,
  contentClassName,
}: FormSheetProps<T>) {
  const handleSubmit = form.handleSubmit(onSubmit)

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className={cn(className)}>
        <SheetHeader>
          <SheetTitle>{title}</SheetTitle>
          {description && <SheetDescription>{description}</SheetDescription>}
        </SheetHeader>
        <FormProvider {...form}>
          <form
            onSubmit={handleSubmit}
            className={cn('flex flex-1 flex-col gap-4 px-4', contentClassName)}
          >
            {children}
            {footer && <SheetFooter>{footer}</SheetFooter>}
          </form>
        </FormProvider>
      </SheetContent>
    </Sheet>
  )
}