Stats with Links

'use client';

import { Card, CardContent, CardFooter } from '@/components/ui/card';
import { cn } from '@/lib/utils';

const data = [
  {
    name: 'Monthly recurring revenue',
    value: '$34.1K',
    change: '+6.1%',
    changeType: 'positive',
    href: '#',
  },
  {
    name: 'Users',
    value: '500.1K',
    change: '+19.2%',
    changeType: 'positive',
    href: '#',
  },
  {
    name: 'User growth',
    value: '11.3%',
    change: '-1.2%',
    changeType: 'negative',
    href: '#',
  },
];

export default function Stats05() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <dl className="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {data.map((item) => (
          <Card className="gap-0 p-0 shadow-2xs" key={item.name}>
            <CardContent className="p-6">
              <dd className="flex items-start justify-between space-x-2">
                <span className="truncate text-muted-foreground text-sm">
                  {item.name}
                </span>
                <span
                  className={cn(
                    'font-medium text-sm',
                    item.changeType === 'positive'
                      ? 'text-emerald-700 dark:text-emerald-500'
                      : 'text-red-700 dark:text-red-500'
                  )}
                >
                  {item.change}
                </span>
              </dd>
              <dd className="mt-1 font-semibold text-3xl text-foreground tabular-nums">
                {item.value}
              </dd>
            </CardContent>
            <CardFooter className="flex justify-end border-border border-t p-0!">
              <a
                className="px-6 py-3 font-medium text-primary text-sm hover:text-primary/90"
                href={item.href}
              >
                View more &#8594;
              </a>
            </CardFooter>
          </Card>
        ))}
      </dl>
    </div>
  );
}