mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
20e44fa34b
This commit completes the single-theme consolidation work by: 1. Fixed blocks page - removed styleName parameter from getAllBlockIds and BlockDisplay 2. Fixed themes/tabs - removed new-york style comparison, always use default 3. Fixed block-display - added proper TypeScript annotations for file parameters 4. Fixed v0-button - removed new-york style conditionals, simplified to default only 5. Fixed lib/blocks - hardcoded "default" style in replaceAll (removed style variable) 6. Fixed identity page - split into IdentityForm and IdentityPage to properly handle Wagmi SSR - IdentityForm contains all Wagmi hooks - IdentityPage wraps it with client-side mount check - Prevents WagmiProvider errors during static generation All CI checks now passing: - ✅ Build: 725/725 pages generated successfully - ✅ Lint: No errors - ✅ TypeCheck: No errors Single-theme system is now fully operational with only "default" theme.
10 lines
12 KiB
JSON
10 lines
12 KiB
JSON
{
|
|
"name": "cards",
|
|
"files": [
|
|
{
|
|
"name": "cards.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Activity,\n ArrowDownRight,\n ArrowUpRight,\n Bell,\n CreditCard,\n DollarSign,\n Package,\n Users,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Progress } from \"@/registry/default/ui/progress\"\n\nexport default function Component() {\n return (\n <div className=\"space-y-8 px-4 md:px-6 lg:px-8\">\n {/* Stats Cards Row */}\n <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-4\">\n <Card>\n <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle className=\"text-sm font-medium\">Total Revenue</CardTitle>\n <DollarSign className=\"h-4 w-4 text-muted-foreground\" />\n </CardHeader>\n <CardContent>\n <div className=\"text-2xl font-bold\">$45,231.89</div>\n <p className=\"text-xs text-muted-foreground\">\n <span className=\"text-green-500 inline-flex items-center\">\n <ArrowUpRight className=\"mr-1 h-3 w-3\" />\n 20.1%\n </span>{\" \"}\n from last month\n </p>\n </CardContent>\n </Card>\n <Card>\n <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle className=\"text-sm font-medium\">Subscriptions</CardTitle>\n <Users className=\"h-4 w-4 text-muted-foreground\" />\n </CardHeader>\n <CardContent>\n <div className=\"text-2xl font-bold\">+2350</div>\n <p className=\"text-xs text-muted-foreground\">\n <span className=\"text-green-500 inline-flex items-center\">\n <ArrowUpRight className=\"mr-1 h-3 w-3\" />\n 180.1%\n </span>{\" \"}\n from last month\n </p>\n </CardContent>\n </Card>\n <Card>\n <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle className=\"text-sm font-medium\">Sales</CardTitle>\n <CreditCard className=\"h-4 w-4 text-muted-foreground\" />\n </CardHeader>\n <CardContent>\n <div className=\"text-2xl font-bold\">+12,234</div>\n <p className=\"text-xs text-muted-foreground\">\n <span className=\"text-green-500 inline-flex items-center\">\n <ArrowUpRight className=\"mr-1 h-3 w-3\" />\n 19%\n </span>{\" \"}\n from last month\n </p>\n </CardContent>\n </Card>\n <Card>\n <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle className=\"text-sm font-medium\">Active Now</CardTitle>\n <Activity className=\"h-4 w-4 text-muted-foreground\" />\n </CardHeader>\n <CardContent>\n <div className=\"text-2xl font-bold\">+573</div>\n <p className=\"text-xs text-muted-foreground\">\n <span className=\"text-red-500 inline-flex items-center\">\n <ArrowDownRight className=\"mr-1 h-3 w-3\" />\n 5%\n </span>{\" \"}\n from last hour\n </p>\n </CardContent>\n </Card>\n </div>\n\n {/* Main Content Cards */}\n <div className=\"grid gap-4 lg:grid-cols-7\">\n <Card className=\"col-span-4\">\n <CardHeader>\n <CardTitle>Overview</CardTitle>\n </CardHeader>\n <CardContent className=\"pl-2\">\n {/* Chart placeholder */}\n <div className=\"h-[200px] flex items-center justify-center border-2 border-dashed rounded-lg\">\n <p className=\"text-muted-foreground\">Revenue Chart</p>\n </div>\n </CardContent>\n </Card>\n <Card className=\"col-span-3\">\n <CardHeader>\n <CardTitle>Recent Sales</CardTitle>\n <CardDescription>You made 265 sales this month.</CardDescription>\n </CardHeader>\n <CardContent>\n <div className=\"space-y-8\">\n {[\n {\n name: \"Olivia Martin\",\n email: \"[email protected]\",\n amount: \"+$1,999.00\",\n avatar: \"/avatars/01.png\",\n },\n {\n name: \"Jackson Lee\",\n email: \"[email protected]\",\n amount: \"+$39.00\",\n avatar: \"/avatars/02.png\",\n },\n {\n name: \"Isabella Nguyen\",\n email: \"[email protected]\",\n amount: \"+$299.00\",\n avatar: \"/avatars/03.png\",\n },\n {\n name: \"William Kim\",\n email: \"[email protected]\",\n amount: \"+$99.00\",\n avatar: \"/avatars/04.png\",\n },\n ].map((sale, index) => (\n <div key={index} className=\"flex items-center\">\n <Avatar className=\"h-9 w-9\">\n <AvatarImage src={sale.avatar} alt=\"Avatar\" />\n <AvatarFallback>\n {sale.name\n .split(\" \")\n .map((n) => n[0])\n .join(\"\")}\n </AvatarFallback>\n </Avatar>\n <div className=\"ml-4 space-y-1\">\n <p className=\"text-sm font-medium leading-none\">\n {sale.name}\n </p>\n <p className=\"text-sm text-muted-foreground\">\n {sale.email}\n </p>\n </div>\n <div className=\"ml-auto font-medium\">{sale.amount}</div>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n </div>\n\n {/* Feature Cards */}\n <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n <Card>\n <CardHeader>\n <CardTitle>Notifications</CardTitle>\n <CardDescription>You have 3 unread messages.</CardDescription>\n </CardHeader>\n <CardContent className=\"grid gap-4\">\n <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n <Bell />\n <div className=\"flex-1 space-y-1\">\n <p className=\"text-sm font-medium leading-none\">\n Push Notifications\n </p>\n <p className=\"text-sm text-muted-foreground\">\n Send notifications to device.\n </p>\n </div>\n </div>\n <div>\n {[1, 2, 3].map((item) => (\n <div\n key={item}\n className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n >\n <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n <div className=\"space-y-1\">\n <p className=\"text-sm font-medium leading-none\">\n New notification {item}\n </p>\n <p className=\"text-sm text-muted-foreground\">\n Your call has been confirmed.\n </p>\n </div>\n </div>\n ))}\n </div>\n </CardContent>\n <CardFooter>\n <Button className=\"w-full\">\n <Bell className=\"mr-2 h-4 w-4\" /> Mark all as read\n </Button>\n </CardFooter>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Team Members</CardTitle>\n <CardDescription>\n Invite your team members to collaborate.\n </CardDescription>\n </CardHeader>\n <CardContent>\n <div className=\"space-y-4\">\n {[\n { name: \"Sofia Davis\", role: \"Admin\", status: \"online\" },\n { name: \"Jackson Lee\", role: \"Member\", status: \"offline\" },\n { name: \"Isabella Nguyen\", role: \"Member\", status: \"online\" },\n ].map((member, i) => (\n <div\n key={i}\n className=\"flex items-center justify-between space-x-4\"\n >\n <div className=\"flex items-center space-x-4\">\n <Avatar>\n <AvatarImage src={`/avatars/0${i + 1}.png`} />\n <AvatarFallback>\n {member.name\n .split(\" \")\n .map((n) => n[0])\n .join(\"\")}\n </AvatarFallback>\n </Avatar>\n <div>\n <p className=\"text-sm font-medium leading-none\">\n {member.name}\n </p>\n <p className=\"text-sm text-muted-foreground\">\n {member.role}\n </p>\n </div>\n </div>\n <Badge\n variant={\n member.status === \"online\" ? \"default\" : \"secondary\"\n }\n >\n {member.status}\n </Badge>\n </div>\n ))}\n </div>\n </CardContent>\n <CardFooter>\n <Button variant=\"outline\" className=\"w-full\">\n <Users className=\"mr-2 h-4 w-4\" />\n Invite Team\n </Button>\n </CardFooter>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Storage</CardTitle>\n <CardDescription>\n Manage your storage and upgrade your plan.\n </CardDescription>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div className=\"space-y-2\">\n <div className=\"flex items-center justify-between text-sm\">\n <span>Documents</span>\n <span className=\"text-muted-foreground\">8.5 GB</span>\n </div>\n <Progress value={65} className=\"h-2\" />\n </div>\n <div className=\"space-y-2\">\n <div className=\"flex items-center justify-between text-sm\">\n <span>Images</span>\n <span className=\"text-muted-foreground\">3.2 GB</span>\n </div>\n <Progress value={25} className=\"h-2\" />\n </div>\n <div className=\"space-y-2\">\n <div className=\"flex items-center justify-between text-sm\">\n <span>Videos</span>\n <span className=\"text-muted-foreground\">1.1 GB</span>\n </div>\n <Progress value={10} className=\"h-2\" />\n </div>\n <div className=\"pt-4 border-t\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm font-medium\">Total Used</span>\n <span className=\"text-sm font-medium\">12.8 GB of 20 GB</span>\n </div>\n <Progress value={64} className=\"h-2 mt-2\" />\n </div>\n </CardContent>\n <CardFooter>\n <Button variant=\"outline\" className=\"w-full\">\n <Package className=\"mr-2 h-4 w-4\" />\n Upgrade Storage\n </Button>\n </CardFooter>\n </Card>\n </div>\n </div>\n )\n}\n"
|
|
}
|
|
],
|
|
"type": "components:example"
|
|
} |