18 lines
3.0 KiB
JSON
18 lines
3.0 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "drawer-dialog",
|
|
"type": "registry:example",
|
|
"author": "shadcn (https://ui.shadcn.com)",
|
|
"registryDependencies": [
|
|
"drawer",
|
|
"dialog"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "examples/drawer-dialog.tsx",
|
|
"content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function DrawerDialogDemo() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n if (isDesktop) {\n return (\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger asChild>\n <Button variant=\"outline\">Edit Profile</Button>\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you're done.\n </DialogDescription>\n </DialogHeader>\n <ProfileForm />\n </DialogContent>\n </Dialog>\n )\n }\n\n return (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Edit Profile</Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Edit profile</DrawerTitle>\n <DrawerDescription>\n Make changes to your profile here. Click save when you're done.\n </DrawerDescription>\n </DrawerHeader>\n <ProfileForm className=\"px-4\" />\n <DrawerFooter className=\"pt-2\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n return (\n <form className={cn(\"grid items-start gap-4\", className)}>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"username\">Username</Label>\n <Input id=\"username\" defaultValue=\"@shadcn\" />\n </div>\n <Button type=\"submit\">Save changes</Button>\n </form>\n )\n}\n",
|
|
"type": "registry:example",
|
|
"target": ""
|
|
}
|
|
]
|
|
} |