Sheet panel

import * as React from "react";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

type SheetPanelProps = {
  /** The control that opens the panel. Passed to SheetTrigger as the child element. */
  trigger: React.ReactElement;
  /** The panel title. Also names the scrolling body for assistive tech. */
  title: string;
  /** One line under the title. */
  description?: string;
  /** Buttons for the bottom edge. Wrap a button in SheetClose to dismiss on click. */
  footer?: React.ReactNode;
  /** Which edge the panel slides from. */
  side?: "right" | "left";
  /** The panel body. It scrolls when it is taller than the window. */
  children: React.ReactNode;
};

/**
 * A side panel with three slots: header, a scrolling body and a pinned footer.
 * Built on the shadcn sheet, so focus trap, Escape and the overlay come with it.
 */
export function SheetPanel({ trigger, title, description, footer, side = "right", children }: SheetPanelProps) {
  return (
    <Sheet>
      <SheetTrigger asChild>{trigger}</SheetTrigger>
      <SheetContent side={side} className="gap-0 p-0 sm:max-w-md">
        <SheetHeader className="border-b p-4 pr-12">
          <SheetTitle>{title}</SheetTitle>
          {description ? (
            <SheetDescription>{description}</SheetDescription>
          ) : (
            <SheetDescription className="sr-only">{title}</SheetDescription>
          )}
        </SheetHeader>
        <div
          role="region"
          aria-label={title}
          tabIndex={0}
          className="flex-1 overflow-y-auto p-4 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
        >
          {children}
        </div>
        {footer && <SheetFooter className="mt-0 flex-row justify-end border-t">{footer}</SheetFooter>}
      </SheetContent>
    </Sheet>
  );
}