Three key figures

// apps/docs/examples/ui/stat-card.tsximport {FileWarningIcon, UsersIcon, WalletIcon} from 'lucide-react';
import {formatNumber} from '@workspace/active-format';import {StatCard} from '@workspace/active-ui/components/composed/stat-card';
/** * Three key figures. The values arrive formatted; the first card has a * rising trend, the second a falling one, and the third links to its * details. The figures are fictitious. */export default function StatCardExample() {  return (    <div className="grid w-full gap-4 sm:grid-cols-3">      <StatCard        title="Participants"        value={formatNumber(12480, 'integer', 'en')}        icon={<UsersIcon />}        trend={{value: '+3.1%', timeframe: 'this year', positive: true}}      />      <StatCard        title="Contributions"        value="€ 4.2 m"        icon={<WalletIcon />}        trend={{value: '-0.8%', timeframe: 'this month', positive: false}}        description="Received in October"      />      <StatCard        title="Returned statements"        value={formatNumber(17, 'integer', 'en')}        icon={<FileWarningIcon />}        href="#returned"        description="Open the list"      />    </div>  );}