mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
16c4453cc1
Squash merge of shadcn-ui/ui main branch into hanzo/ui, bringing in: - [email protected] through [email protected] releases - New apps/v4 directory structure - Registry system improvements and MCP server - Framework support (Vue, Svelte, React Native) - New templates (vite-app, monorepo-next, laravel) - Zod 4 compatibility (scoped override for zod@>4) - Test fixture corrections for alias resolution All 867 merge conflicts resolved preserving Hanzo customizations. 1020/1020 shadcn tests pass.
17 lines
3.7 KiB
JSON
17 lines
3.7 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "drawer-demo",
|
|
"type": "registry:example",
|
|
"author": "shadcn (https://ui.shadcn.com)",
|
|
"registryDependencies": [
|
|
"drawer"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "examples/drawer-demo.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport default function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant=\"outline\">Open Drawer</Button>\n </DrawerTrigger>\n <DrawerContent>\n <div className=\"mx-auto w-full max-w-sm\">\n <DrawerHeader>\n <DrawerTitle>Move Goal</DrawerTitle>\n <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n </DrawerHeader>\n <div className=\"p-4 pb-0\">\n <div className=\"flex items-center justify-center space-x-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(-10)}\n disabled={goal <= 200}\n >\n <Minus />\n <span className=\"sr-only\">Decrease</span>\n </Button>\n <div className=\"flex-1 text-center\">\n <div className=\"text-7xl font-bold tracking-tighter\">\n {goal}\n </div>\n <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n Calories/day\n </div>\n </div>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8 shrink-0 rounded-full\"\n onClick={() => onClick(10)}\n disabled={goal >= 400}\n >\n <Plus />\n <span className=\"sr-only\">Increase</span>\n </Button>\n </div>\n <div className=\"mt-3 h-[120px]\">\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <BarChart data={data}>\n <Bar\n dataKey=\"goal\"\n style={\n {\n fill: \"hsl(var(--foreground))\",\n opacity: 0.9,\n } as React.CSSProperties\n }\n />\n </BarChart>\n </ResponsiveContainer>\n </div>\n </div>\n <DrawerFooter>\n <Button>Submit</Button>\n <DrawerClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DrawerClose>\n </DrawerFooter>\n </div>\n </DrawerContent>\n </Drawer>\n )\n}\n",
|
|
"type": "registry:example",
|
|
"target": ""
|
|
}
|
|
]
|
|
} |