Components
Loading preview...
Here is Stats component
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/stats
import { cn } from "@/lib/utils";
import type React from "react";
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Delta, DeltaIcon, DeltaValue } from "@/components/ui/delta";
type Stat = {
label: string;
value: string;
delta: number;
};
const stats = [
{ label: "Active users", value: "847", delta: 3.1 },
{ label: "Revenue", value: "$18,290", delta: 12.4 },
{ label: "Conversion Rate", value: "3.28%", delta: -0.4 },
] as const;
export function DashboardStats() {
return (
<>
{stats.map((s) => (
<StatCard key={s.label} stat={s} />
))}
</>
);
}
function StatCard({
stat,
className,
...props
}: React.ComponentProps<typeof Card> & { stat: Stat }) {
const { label, value, delta } = stat;
return (
<Card
className={cn(
"rounded-none bg-background shadow-none ring-0 gap-1 py-4",
className
)}
{...props}
>
<CardHeader className="flex flex-row items-baseline justify-between gap-2 px-4 pb-0">
<CardTitle className="font-normal text-muted-foreground text-xs tracking-wide truncate">
{label}
</CardTitle>
<Delta value={delta} className="text-xs shrink-0">
<DeltaIcon />
<DeltaValue />
</Delta>
</CardHeader>
<CardContent className="flex flex-row items-center gap-2 px-4 pt-0">
<p className="font-medium text-xl tabular-nums">{value}</p>
</CardContent>
</Card>
);
}
export default DashboardStats;