mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
f91e76841b
Major fixes: - Fixed wagmi/Web3 SSR errors by lazy-loading config in Web3Provider - Added SidebarProvider to sidebar-demo components - Added 'use client' to 14 demo files with hooks/state/event handlers - Temporarily disabled force-static on blocks page Build progress: 0 → 258/1035 pages (25%) before hitting /blocks error Remaining issue: - /blocks page has function-passing error during static generation Package versions confirmed: - React 19.2.0 ✅ - Next.js 16.0.0 ✅ - Tailwind CSS 4.1.14 ✅
13 lines
3.6 KiB
JSON
13 lines
3.6 KiB
JSON
{
|
|
"name": "drawer-demo",
|
|
"registryDependencies": [
|
|
"drawer"
|
|
],
|
|
"files": [
|
|
{
|
|
"name": "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 className=\"h-4 w-4\" />\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 className=\"h-4 w-4\" />\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": "components:example"
|
|
} |