Stat Card

import StatCard from '@/components/ui/statcard';

export default function StatCardDemo() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '1em', padding: '2em', maxWidth: 960, margin: '0 auto' }}>
      <StatCard label="Invoiced (May)" value="$15,400.00" sub="8 invoices" trend="up" href="/invoices" />
      <StatCard label="Paid (May)" value="$12,100.00" sub="6 paid" trend="up" />
      <StatCard label="Outstanding" value="$3,300.00" sub="2 overdue" trend="down" />
      <StatCard label="Expenses (May)" value="$4,200.00" sub="12 expenses" trend="neutral" />
    </div>
  );
}