mirror of
https://github.com/vercel/next-learn.git
synced 2026-07-09 06:55:12 +00:00
c0f63f4d25
* Run create-next-app * Add READMEs * Remove stuff we don't need * Add dummy data * Add types for dummy data * Add dummy routes * Remove unused CSS * Split dummy data and definitions * Add prettier plugin for tailwind * Create background-blur.tsx * Create hero.tsx * Create login-form.tsx * Tweak * Install hero icons and clsx * Create calculations.tsx * Update dummy-data.tsx * Create card.tsx * Create dashboard-overview.tsx * Update page.tsx * Add placeholder for dashboard-topnav * Adjust sizings for whole page * Update card styles and add icons * ugh, fonts are hard * misc * Remo unused import
39 lines
883 B
TypeScript
39 lines
883 B
TypeScript
import {
|
|
BanknotesIcon,
|
|
ClockIcon,
|
|
UserGroupIcon,
|
|
InboxIcon,
|
|
} from "@heroicons/react/24/outline";
|
|
|
|
const iconMap = {
|
|
collected: BanknotesIcon,
|
|
customers: UserGroupIcon,
|
|
pending: ClockIcon,
|
|
invoices: InboxIcon,
|
|
};
|
|
|
|
export default function Card({
|
|
title,
|
|
value,
|
|
type,
|
|
}: {
|
|
title: string;
|
|
value: number | string;
|
|
type: "invoices" | "customers" | "pending" | "collected";
|
|
}) {
|
|
const Icon = iconMap[type];
|
|
|
|
return (
|
|
<div className="flex justify-between rounded-xl border bg-white p-6 shadow-sm">
|
|
<div>
|
|
<h3 className="text-sm font-medium">{title}</h3>
|
|
<p className="mt-2 text-3xl font-semibold tracking-wide">{value}</p>
|
|
<p className="mt-1.5 text-sm text-zinc-400">+00% since last month</p>
|
|
</div>
|
|
{Icon ? (
|
|
<Icon className="h-5 w-5 text-zinc-700" aria-label={type} />
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|