بطاقة الإحصاءات (Stats Card)

تعرض كتلة بطاقة الإحصاءات (Stats Card) المقاييس الأساسية مع الاتجاه والأيقونات.

التثبيت

bash

npx @smicolon/fasla-ui@latest add stats-card

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

الإيرادات

48,200 ر.س

+12.5%مقارنة بالشهر الماضي

الطلبات

1,284

+8%مقارنة بالشهر الماضي

المرتجعات

-2.1%مقارنة بالشهر الماضي

الميزات

عرض العنوان والقيمة
مؤشر الاتجاه، صعودًا أو هبوطًا مع النسبة
أيقونة اختيارية
نص وصفي
حالة التحميل
الجزء StatsGrid لتخطيط البطاقات

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`title`	`string`	لا يوجد	التسمية فوق القيمة.
`value`	`string \| number`	لا يوجد	القيمة الرئيسية.
`description`	`string`	لا يوجد	نص تحت القيمة.
`icon`	`ReactNode`	لا يوجد	أيقونة في الزاوية.
`trend`	`{ value, direction: "up" \| "down" \| "neutral" }`	لا يوجد	التغيّر، مع سهم للصعود أو الهبوط.
`loading`	`boolean`	`false`	يعرض هيكل التحميل أثناء التحميل.
`StatsGrid`	`{ columns: 2 \| 3 \| 4 }`	لا يوجد	يرتّب البطاقات في عمودين أو ثلاثة أو أربعة.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

tsx

import { StatsCard, StatsGrid } from "@/components/blocks/stats-card"

export function StoreStats() {
  return (
    <StatsGrid columns={3}>
      <StatsCard
        title="الإيرادات"
        value="48,200 ر.س"
        description="مقارنة بالشهر الماضي"
        trend={{ value: 12.5, direction: "up" }}
      />
      <StatsCard
        title="الطلبات"
        value="1,284"
        description="مقارنة بالشهر الماضي"
        trend={{ value: 8, direction: "up" }}
      />
      <StatsCard
        title="المرتجعات"
        value="36"
        description="مقارنة بالشهر الماضي"
        trend={{ value: -2.1, direction: "down" }}
      />
    </StatsGrid>
  )
}