Sheet

'use client';import { Button } from '@/components/ui/button';import {  Sheet,  SheetContent,  SheetDescription,  SheetHeader,  SheetTitle,  SheetTrigger,} from '@/components/ui/sheet';const SIDES = ['top', 'right', 'bottom', 'left'] as const;export default function Demo() {  return (    <div className="flex flex-wrap justify-center gap-2">      {SIDES.map((side) => (        <Sheet key={side}>          <SheetTrigger render={<Button variant="outline" className="capitalize" />}>            {side}          </SheetTrigger>          <SheetContent side={side}>            <SheetHeader>              <SheetTitle>Sheet from the {side}</SheetTitle>              <SheetDescription>Slides in from its own edge.</SheetDescription>            </SheetHeader>          </SheetContent>        </Sheet>      ))}    </div>  );}