Metric Cards

1'use client';
2import { type ReactNode } from 'react';
3import Link from 'next/link';
4import { TrendingUp, TrendingDown, Users, DollarSign, BarChart3, Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function MetricCardsSection() {
29  const metrics = [
30    { label: 'Total Revenue', value: '$48,295', change: '+12.5%', up: true, icon: DollarSign, iconBg: 'bg-brand-50 dark:bg-brand-500/15', iconColor: 'text-brand-500' },
31    { label: 'Active Users', value: '12,847', change: '+8.2%', up: true, icon: Users, iconBg: 'bg-success-50 dark:bg-success-500/15', iconColor: 'text-success-500' },
32    { label: 'Bounce Rate', value: '24.3%', change: '-3.1%', up: false, icon: BarChart3, iconBg: 'bg-warning-50 dark:bg-warning-500/15', iconColor: 'text-warning-500' },
33    { label: 'Conversion', value: '3.24%', change: '+1.8%', up: true, icon: TrendingUp, iconBg: 'bg-blue-light-50 dark:bg-blue-light-500/15', iconColor: 'text-blue-light-500' },
34  ];
35
36  return (
37    <SectionCard title="Metric Cards" sourceSlug="/ui/source/ui-elements/metric-cards">
38      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
39        {metrics.map((m) => (
40          <div key={m.label} className="rounded-xl border border-gray-200 bg-white p-4 dark:border-white/5 dark:bg-gray-dark">
41            <div className="flex items-center justify-between">
42              <p className="text-xs font-medium text-gray-500 dark:text-gray-400">{m.label}</p>
43              <div className={`flex size-8 items-center justify-center rounded-lg ${m.iconBg}`}>
44                <m.icon className={`size-4 ${m.iconColor}`} />
45              </div>
46            </div>
47            <p className="mt-2 text-2xl font-bold text-gray-800 dark:text-white/90">{m.value}</p>
48            <div className={`mt-1 flex items-center gap-1 text-xs font-medium ${m.up ? 'text-success-500' : 'text-error-500'}`}>
49              {m.up ? <TrendingUp className="size-3" /> : <TrendingDown className="size-3" />}
50              {m.change} from last month
51            </div>
52          </div>
53        ))}
54      </div>
55    </SectionCard>
56  );
57}