mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
160 lines
5.5 KiB
TypeScript
160 lines
5.5 KiB
TypeScript
"use client"
|
|
|
|
import { Badge } from "@/registry/bases/base/ui/badge"
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/bases/base/ui/card"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
export function SectionCards() {
|
|
return (
|
|
<div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
|
|
<Card className="@container/card">
|
|
<CardHeader>
|
|
<CardDescription>Total Revenue</CardDescription>
|
|
<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
|
|
$1,250.00
|
|
</CardTitle>
|
|
<CardAction>
|
|
<Badge variant="outline">
|
|
<IconPlaceholder
|
|
lucide="TrendingUpIcon"
|
|
tabler="IconTrendingUp"
|
|
hugeicons="ChartUpIcon"
|
|
phosphor="TrendUpIcon"
|
|
remixicon="RiArrowUpLine"
|
|
/>
|
|
+12.5%
|
|
</Badge>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardFooter className="flex-col items-start gap-1.5 text-sm">
|
|
<div className="line-clamp-1 flex gap-2 font-medium">
|
|
Trending up this month{" "}
|
|
<IconPlaceholder
|
|
lucide="TrendingUpIcon"
|
|
tabler="IconTrendingUp"
|
|
hugeicons="ChartUpIcon"
|
|
phosphor="TrendUpIcon"
|
|
remixicon="RiArrowUpLine"
|
|
className="size-4"
|
|
/>
|
|
</div>
|
|
<div className="text-muted-foreground">
|
|
Visitors for the last 6 months
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
<Card className="@container/card">
|
|
<CardHeader>
|
|
<CardDescription>New Customers</CardDescription>
|
|
<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
|
|
1,234
|
|
</CardTitle>
|
|
<CardAction>
|
|
<Badge variant="outline">
|
|
<IconPlaceholder
|
|
lucide="TrendingDownIcon"
|
|
tabler="IconTrendingDown"
|
|
hugeicons="ChartDownIcon"
|
|
phosphor="TrendDownIcon"
|
|
remixicon="RiArrowDownLine"
|
|
/>
|
|
-20%
|
|
</Badge>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardFooter className="flex-col items-start gap-1.5 text-sm">
|
|
<div className="line-clamp-1 flex gap-2 font-medium">
|
|
Down 20% this period{" "}
|
|
<IconPlaceholder
|
|
lucide="TrendingDownIcon"
|
|
tabler="IconTrendingDown"
|
|
hugeicons="ChartDownIcon"
|
|
phosphor="TrendDownIcon"
|
|
remixicon="RiArrowDownLine"
|
|
className="size-4"
|
|
/>
|
|
</div>
|
|
<div className="text-muted-foreground">
|
|
Acquisition needs attention
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
<Card className="@container/card">
|
|
<CardHeader>
|
|
<CardDescription>Active Accounts</CardDescription>
|
|
<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
|
|
45,678
|
|
</CardTitle>
|
|
<CardAction>
|
|
<Badge variant="outline">
|
|
<IconPlaceholder
|
|
lucide="TrendingUpIcon"
|
|
tabler="IconTrendingUp"
|
|
hugeicons="ChartUpIcon"
|
|
phosphor="TrendUpIcon"
|
|
remixicon="RiArrowUpLine"
|
|
/>
|
|
+12.5%
|
|
</Badge>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardFooter className="flex-col items-start gap-1.5 text-sm">
|
|
<div className="line-clamp-1 flex gap-2 font-medium">
|
|
Strong user retention{" "}
|
|
<IconPlaceholder
|
|
lucide="TrendingUpIcon"
|
|
tabler="IconTrendingUp"
|
|
hugeicons="ChartUpIcon"
|
|
phosphor="TrendUpIcon"
|
|
remixicon="RiArrowUpLine"
|
|
className="size-4"
|
|
/>
|
|
</div>
|
|
<div className="text-muted-foreground">Engagement exceed targets</div>
|
|
</CardFooter>
|
|
</Card>
|
|
<Card className="@container/card">
|
|
<CardHeader>
|
|
<CardDescription>Growth Rate</CardDescription>
|
|
<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
|
|
4.5%
|
|
</CardTitle>
|
|
<CardAction>
|
|
<Badge variant="outline">
|
|
<IconPlaceholder
|
|
lucide="TrendingUpIcon"
|
|
tabler="IconTrendingUp"
|
|
hugeicons="ChartUpIcon"
|
|
phosphor="TrendUpIcon"
|
|
remixicon="RiArrowUpLine"
|
|
/>
|
|
+4.5%
|
|
</Badge>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardFooter className="flex-col items-start gap-1.5 text-sm">
|
|
<div className="line-clamp-1 flex gap-2 font-medium">
|
|
Steady performance increase{" "}
|
|
<IconPlaceholder
|
|
lucide="TrendingUpIcon"
|
|
tabler="IconTrendingUp"
|
|
hugeicons="ChartUpIcon"
|
|
phosphor="TrendUpIcon"
|
|
remixicon="RiArrowUpLine"
|
|
className="size-4"
|
|
/>
|
|
</div>
|
|
<div className="text-muted-foreground">Meets growth projections</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|