تجزیه و تحلیل پایگاه کد Shadcn-ui: examples-nav.tsx توضیح داده شده است

من می خواستم بفهمم که نمونه زیر چگونه در ui.shadcn.com توسعه یافته است، بنابراین به کد منبع آن نگاه کردم. از آنجا که shadcn-ui با استفاده از روتر برنامه ساخته شده است، فایل هایی که من به آنها علاقه مند بودم page.tsx و examples-nav.tsx بودند.

در این مقاله با موارد زیر آشنا خواهیم شد:

1. کد مربوط به examples-nav کجاست؟
2. نمونه‌هایی از قطعه کد ناو.

آیا می خواهید یاد بگیرید که چگونه shadcn-ui/ui را از ابتدا بسازید؟ ساخت از ابتدا را بررسی کنید و اگر دوست دارید به آن ستاره بدهید. چالش های Sovle برای ساخت shadcn-ui/ui از ابتدا. اگر گیر کرده اید یا نیاز به کمک دارید؟ راه حل موجود است.

کد مربوط به examples-nav کجاست؟

ExamplesNav مطابق شکل زیر در page.tsx استفاده می شود

examples-nav.tsx کد زیر را دارد.

نمونه آرایه ای حاوی کد زیر است:

const examples = \[
  {
    name: "Mail",
    href: "/examples/mail",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
  },
  {
    name: "Dashboard",
    href: "/examples/dashboard",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/dashboard",
  },
  {
    name: "Cards",
    href: "/examples/cards",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/cards",
  },
  {
    name: "Tasks",
    href: "/examples/tasks",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/tasks",
  },
  {
    name: "Playground",
    href: "/examples/playground",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/playground",
  },
  {
    name: "Forms",
    href: "/examples/forms",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/forms",
  },
  {
    name: "Music",
    href: "/examples/music",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/music",
  },
  {
    name: "Authentication",
    href: "/examples/authentication",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/authentication",
  },
\]

نتیجه:

کامپوننت ExamplesNav برای نمایش عنصر nav نمونه در ui.shadcn.com استفاده می شود. این مؤلفه از آرایه نمونه‌ها برای نشان دادن عناصر برگه nav استفاده می‌کند.

درمورد من:

وب سایت: https://ramunarasinga.com/

لینکدین: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

ایمیل: ramu.narasinga@gmail.com

منابع:

1. https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/page.tsx
2. https://github.com/shadcn-ui/ui/blob/main/apps/www/components/examples-nav.tsx#L55
3. https://github.com/shadcn-ui/ui/blob/main/apps/www/components/page-header.tsx#L5