import {

Drawer,

DrawerContent,

DrawerHeader,

DrawerTitle,

DrawerTrigger,

} from "@/components/ui/drawer"

export default function DrawerDemo() {

return (

<div className="w-full min-h-[400px] flex items-center justify-center p-8">

<Drawer>

<DrawerTrigger className="inline-flex h-8 items-center justify-center rounded-full border border-black/10 bg-transparent px-4 text-xs font-medium transition-colors hover:bg-black/5 dark:border-white/10 dark:text-zinc-50 dark:hover:bg-white/5">

Open drawer

</DrawerTrigger>

<DrawerContent className="h-[96vh]">

<div className="max-w-[700px] mx-auto w-full">

<DrawerHeader className="p-12 pb-16">

<DrawerTitle className="text-xl mb-6">Drawer for React.</DrawerTitle>

<div className="space-y-6 text-[14px] text-zinc-500 dark:text-zinc-400">

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

aliquip ex ea commodo consequat.

</p>

<p>

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa by officia deserunt mollit anim id est laborum.

</p>

<p>

This one is Vaul, the unstyled drawer for React made by Emil Kowalski,

restyled with Sunflower's tokens. Drag the handle down to dismiss it, or

press Escape. The page behind scales back while it is open.

</p>

<div className="pt-2">

<a href="#" className="inline-flex items-center text-zinc-950 dark:text-zinc-50 hover:underline">

<svg className="mr-2 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">

<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />

</svg>

Read the Vaul documentation

</a>

</div>

</div>

</DrawerHeader>

</div>

</DrawerContent>

</Drawer>

</div>

)

}