28 lines
1.0 KiB
TypeScript
28 lines
1.0 KiB
TypeScript
import { clsx } from "clsx";
|
|
import type { HTMLAttributes, ReactNode } from "react";
|
|
|
|
export function Card({ className, children, ...props }: HTMLAttributes<HTMLDivElement> & { children: ReactNode }) {
|
|
return (
|
|
<div className={clsx("rounded-lg border border-forest/10 bg-paper/88 p-5 shadow-soft backdrop-blur dark:border-white/10 dark:bg-white/[0.06]", className)} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function StatCard({ label, value, detail, tone = "forest" }: { label: string; value: string; detail: string; tone?: "forest" | "indigo" | "saffron" | "coral" }) {
|
|
const color = {
|
|
forest: "text-forest dark:text-mint",
|
|
indigo: "text-indigo",
|
|
saffron: "text-saffron",
|
|
coral: "text-coral"
|
|
}[tone];
|
|
|
|
return (
|
|
<Card className="p-4">
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-ink/50 dark:text-paper/50">{label}</p>
|
|
<p className={`mt-2 font-display text-3xl ${color}`}>{value}</p>
|
|
<p className="mt-1 text-sm text-ink/60 dark:text-paper/60">{detail}</p>
|
|
</Card>
|
|
);
|
|
}
|