ساخت Dashboard Layout در React

ساخت Dashboard Layout در React را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

در React کلاس‌ها با className نوشته می‌شوند و باید رشته‌های کامل Utility در Source وجود داشته باشند. Conditional Class بهتر است از Map مشخص Variantها ساخته شود تا هم Scanner آن‌ها را ببیند و هم ترکیب‌ها قابل تست بمانند.

روش پیاده‌سازی

1. ساختار Component و Props را تعریف کنید.
2. هر Variant را به رشته کامل و ایستا از کلاس‌ها نگاشت کنید.
3. Layout را از Componentهای کوچک مانند KpiCard بسازید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

export default function Dashboard() {
  return (
    <main className="mx-auto max-w-7xl p-4 sm:p-6 lg:p-8">
      <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
        <KpiCard title="فروش" value="۱۲۵M" />
        <KpiCard title="کاربر" value="۸,۴۵۰" />
        <KpiCard title="دوره" value="۳۲" />
        <KpiCard title="رشد" value="+۱۵٪" />
      </div>
    </main>
  );
}

خروجی مورد انتظار

Dashboard Responsive با چهار KPI.

نکات مهم و خطاهای رایج

• عبارت‌هایی مانند bg-${color}-600 توسط Scanner قابل اتکا نیستند.
• رشته کلاس بسیار طولانی را بدون مرز Component تکرار نکنید.

تمرین پیشنهادی

برای مثال یک State خطا و چیدمان تک‌ستونه موبایل اضافه کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS