40 lines
2.5 KiB
JSON
40 lines
2.5 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "radix-sheet-demo",
|
|
"type": "registry:ui",
|
|
"title": "Radix Sheet Demo",
|
|
"description": "Demo showing a sheet with radix dialog.",
|
|
"dependencies": [
|
|
"lucide-react",
|
|
"motion"
|
|
],
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/radix-sheet",
|
|
"button",
|
|
"label",
|
|
"input"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/demo/radix/sheet/index.tsx",
|
|
"content": "import { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from '@/components/animate-ui/radix/sheet';\n\ninterface RadixSheetDemoProps {\n side: 'right' | 'left' | 'top' | 'bottom';\n}\nexport const RadixSheetDemo = ({ side }: RadixSheetDemoProps) => {\n return (\n <Sheet>\n <SheetTrigger asChild>\n <Button variant=\"outline\">Open</Button>\n </SheetTrigger>\n <SheetContent side={side}>\n <SheetHeader>\n <SheetTitle>Edit profile</SheetTitle>\n <SheetDescription>\n Make changes to your profile here. Click save when you're done.\n </SheetDescription>\n </SheetHeader>\n <div className=\"grid gap-4 py-4\">\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"name\" className=\"text-right\">\n Name\n </Label>\n <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n </div>\n <div className=\"grid grid-cols-4 items-center gap-4\">\n <Label htmlFor=\"username\" className=\"text-right\">\n Username\n </Label>\n <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n </div>\n </div>\n <SheetFooter>\n <SheetClose asChild>\n <Button type=\"submit\">Save changes</Button>\n </SheetClose>\n </SheetFooter>\n </SheetContent>\n </Sheet>\n );\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/demo/radix/sheet.tsx"
|
|
}
|
|
],
|
|
"meta": {
|
|
"demoProps": {
|
|
"Sheet": {
|
|
"side": {
|
|
"value": "right",
|
|
"options": {
|
|
"right": "right",
|
|
"left": "left",
|
|
"top": "top",
|
|
"bottom": "bottom"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |