کارت متریک (Metric Card)

import {
  MetricCard,
  MetricCardHeader,
  MetricCardLabel,
  MetricCardContent,
  MetricCardValue,
  MetricCardDifferential,
  MetricCardSparkline,
} from '@parto-system-design/ui'
import { Users } from 'lucide-react'

export default function MyComponent() {
  const data = [
    { value: 4000, timestamp: '2024-01-01' },
    { value: 4200, timestamp: '2024-01-02' },
    { value: 4100, timestamp: '2024-01-03' },
    // ...
  ]

  return (
    <MetricCard>
      <MetricCardHeader>
        <MetricCardLabel icon={<Users className="h-3.5 w-3.5" />}>کاربران فعال</MetricCardLabel>
      </MetricCardHeader>
      <MetricCardContent>
        <MetricCardValue>4,605</MetricCardValue>
        <MetricCardDifferential variant="negative">-0.1%</MetricCardDifferential>
      </MetricCardContent>
      <MetricCardSparkline data={data} dataKey="value" />
    </MetricCard>
  )
}

import { Users } from 'lucide-react'
;<MetricCard>
  <MetricCardHeader>
    <MetricCardLabel icon={<Users className="h-3.5 w-3.5" />} tooltip="تعداد کاربران فعال در 24 ساعت گذشته">
      کاربران فعال
    </MetricCardLabel>
  </MetricCardHeader>
  <MetricCardContent>
    <MetricCardValue>4,605</MetricCardValue>
    <MetricCardDifferential variant="positive">+2.5%</MetricCardDifferential>
  </MetricCardContent>
  <MetricCardSparkline data={data} dataKey="value" />
</MetricCard>

<MetricCard>
  <MetricCardHeader href="https://example.com/analytics">
    <MetricCardLabel>درآمد ماهانه</MetricCardLabel>
  </MetricCardHeader>
  <MetricCardContent>
    <MetricCardValue>۲۵۰M</MetricCardValue>
    <MetricCardDifferential variant="positive">+12.3%</MetricCardDifferential>
  </MetricCardContent>
  <MetricCardSparkline data={revenueData} dataKey="value" />
</MetricCard>

<MetricCard>
  <MetricCardHeader>
    <MetricCardLabel>کاربران جدید</MetricCardLabel>
  </MetricCardHeader>
  <MetricCardContent>
    <MetricCardValue>1,234</MetricCardValue>
    <MetricCardDifferential variant="positive">+5.2%</MetricCardDifferential>
  </MetricCardContent>
</MetricCard>

<MetricCard isLoading={true} />

<MetricCard dir="ltr">
  <MetricCardHeader href="https://example.com">
    <MetricCardLabel tooltip="Number of active users in the last 24 hours">Active Users</MetricCardLabel>
  </MetricCardHeader>
  <MetricCardContent>
    <MetricCardValue>4,605</MetricCardValue>
    <MetricCardDifferential variant="negative">-0.1%</MetricCardDifferential>
  </MetricCardContent>
  <MetricCardSparkline data={data} dataKey="value" />
</MetricCard>

const metrics = [
  {
    label: 'کاربران فعال',
    value: '4,605',
    differential: '-0.1%',
    variant: 'negative',
    data: activeUsersData,
  },
  {
    label: 'فروش امروز',
    value: '۱۲۳M',
    differential: '+5.2%',
    variant: 'positive',
    data: salesData,
  },
  {
    label: 'نرخ تبدیل',
    value: '3.24%',
    differential: '+0.8%',
    variant: 'positive',
    data: conversionData,
  },
]

;<div className="grid grid-cols-1 md:grid-cols-3 gap-4" dir="rtl">
  {metrics.map((metric) => (
    <MetricCard key={metric.label}>
      <MetricCardHeader>
        <MetricCardLabel>{metric.label}</MetricCardLabel>
      </MetricCardHeader>
      <MetricCardContent>
        <MetricCardValue>{metric.value}</MetricCardValue>
        <MetricCardDifferential variant={metric.variant}>{metric.differential}</MetricCardDifferential>
      </MetricCardContent>
      <MetricCardSparkline data={metric.data} dataKey="value" />
    </MetricCard>
  ))}
</div>

import { useQuery } from '@tanstack/react-query'

function MetricCardWithQuery() {
  const { data, isLoading } = useQuery({
    queryKey: ['metrics'],
    queryFn: fetchMetrics,
  })

  return (
    <MetricCard isLoading={isLoading}>
      <MetricCardHeader>
        <MetricCardLabel>کاربران فعال</MetricCardLabel>
      </MetricCardHeader>
      <MetricCardContent>
        <MetricCardValue>{data?.value.toLocaleString('fa-IR')}</MetricCardValue>
        <MetricCardDifferential variant={data?.trend > 0 ? 'positive' : 'negative'}>
          {data?.trend > 0 ? '+' : ''}
          {data?.trend}%
        </MetricCardDifferential>
      </MetricCardContent>
      <MetricCardSparkline data={data?.history || []} dataKey="value" />
    </MetricCard>
  )
}

type SparklineData = {
  value: number // مقدار عددی
  timestamp: string // زمان (برای reference، در نمودار نمایش داده نمی‌شود)
}

// هر دو حالت درست کار می‌کنند:
<MetricCardDifferential variant="negative">-۰.۱٪</MetricCardDifferential>
<MetricCardDifferential variant="negative">۰.۱٪-</MetricCardDifferential>
// هر دو به صورت "-۰.۱٪" نمایش داده می‌شوند

<MetricCard dir="ltr">{/* ... */}</MetricCard>