برنامه نویسی

تجزیه و تحلیل پایگاه کد shadcn-ui/ui: مثال وظایف توضیح داده شده است.

در این مقاله با مثال Tasks در shadcn-ui/ui آشنا خواهیم شد. این مقاله شامل بخش های زیر است:

1718398649517%3Fe%3D1723680000%26v%3Dbeta%26t%3Du4 70Q5 5fU01bpQm

  1. پوشه وظایف کجا قرار دارد؟
  2. در پوشه وظایف چیست؟
  3. اجزای مورد استفاده در وظایف مثال.

پوشه وظایف کجا قرار دارد؟

Shadcn-ui/ui از روتر برنامه استفاده می کند و پوشه وظایف در پوشه نمونه ها قرار دارد که در (app) یک گروه مسیر در Next.js قرار دارد.

1718398648077%3Fe%3D1723680000%26v%3Dbeta%26t%3D6GLcRPKOYFknxnZM detLhAI411culCU7e FP7XyF7Q

در پوشه وظایف چیست؟

همانطور که از تصویر بالا می بینید، پوشه اجزا، داده، page.tsx داریم.

page.tsx به جای {children} در examples/layout.tsx بارگیری می شود.

در زیر کد انتخاب شده از tasks/page.tsx آمده است

import { promises as fs } from "fs"
import path from "path"
import { Metadata } from "next"
import Image from "next/image"
import { z } from "zod"

import { columns } from "./components/columns"
import { DataTable } from "./components/data-table"
import { UserNav } from "./components/user-nav"
import { taskSchema } from "./data/schema"

export const metadata: Metadata = {
  title: "Tasks",
  description: "A task and issue tracker build using Tanstack Table.",
}

// Simulate a database read for tasks.
async function getTasks() {
  const data = await fs.readFile(
    path.join(process.cwd(), "app/(app)/examples/tasks/data/tasks.json")
  )

  const tasks = JSON.parse(data.toString())

  return z.array(taskSchema).parse(tasks)
}

export default async function TaskPage() {
  const tasks = await getTasks()

  return (
    <>
      <div className="md:hidden">
        <Image
          src="/examples/tasks-light.png"
          width={1280}
          height={998}
          alt="Playground"
          className="block dark:hidden"
        />
        <Image
          src="/examples/tasks-dark.png"
          width={1280}
          height={998}
          alt="Playground"
          className="hidden dark:block"
        />
      </div>
      <div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
        <div className="flex items-center justify-between space-y-2">
          <div>
            <h2 className="text-2xl font-bold tracking-tight">Welcome back!</h2>
            <p className="text-muted-foreground">
              Here&apos;s a list of your tasks for this month!
            </p>
          </div>
          <div className="flex items-center space-x-2">
            <UserNav />
          </div>
        </div>
        <DataTable data={tasks} columns={columns} />
      </div>
    </>
  )
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اجزای مورد استفاده در وظایف مثال.

برای پیدا کردن اجزای مورد استفاده در این مثال کارت، می‌توانیم به سادگی به واردات استفاده شده در بالای صفحه نگاه کنیم.

import { columns } from "./components/columns"
import { DataTable } from "./components/data-table"
import { UserNav } from "./components/user-nav"
import { taskSchema } from "./data/schema"
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اجزای مدولار داخل پوشه کارت را فراموش نکنید.

1718398649435%3Fe%3D1723680000%26v%3Dbeta%26t%3D89278ZYDrj0JMsjiLb1vgfTP4uSxgi

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

درمورد من:

وب سایت: 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/tree/main/apps/www/app/(app)/examples/cards

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا