34 lines
864 B
TypeScript
34 lines
864 B
TypeScript
import { ReactNode } from "react";
|
|
|
|
export default function StatCard({
|
|
title,
|
|
value,
|
|
icon,
|
|
tone = "teal"
|
|
}: {
|
|
title: string;
|
|
value: string | number;
|
|
icon: ReactNode;
|
|
tone?: "teal" | "amber" | "rose" | "indigo";
|
|
}) {
|
|
const tones = {
|
|
teal: "bg-teal-50 text-jade",
|
|
amber: "bg-amber-50 text-amber-700",
|
|
rose: "bg-rose-50 text-rose-700",
|
|
indigo: "bg-indigo-50 text-indigo-700"
|
|
};
|
|
|
|
return (
|
|
<div className="rounded-md border border-line bg-white p-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<div className="text-sm text-slate-500">{title}</div>
|
|
<div className="mt-2 text-2xl font-semibold text-ink">{value}</div>
|
|
</div>
|
|
<div className={`flex h-10 w-10 items-center justify-center rounded-md ${tones[tone]}`}>{icon}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|