Metric Card

import { Users, ShoppingCart } from 'lucide-react'
import { MetricCard, MetricCardWithIcon, MetricCardWithButton } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%,220px),1fr))' }}>
      <MetricCard label="Total Revenue" value="$48,295" change="+12.5%" trend="up" />
      <MetricCard label="Active Users" value="2,847" change="-3.2%" trend="down" />
      <MetricCardWithIcon label="New Orders" value="384" change="+8.1%" trend="up" icon={<ShoppingCart className="h-5 w-5" />} />
      <MetricCardWithIcon label="Team Members" value="28" change="+2" trend="up" icon={<Users className="h-5 w-5" />} iconColor="bg-green-100 text-green-600" />
      <MetricCardWithButton label="MRR Growth" value="$12.4K" change="+18.3%" trend="up" actionLabel="View report" />
    </div>
  )
}