تجزیه و تحلیل پایگاه کد shadcn-ui/ui: مثال وظایف توضیح داده شده است.
در این مقاله با مثال Tasks در shadcn-ui/ui آشنا خواهیم شد. این مقاله شامل بخش های زیر است:
- پوشه وظایف کجا قرار دارد؟
- در پوشه وظایف چیست؟
- اجزای مورد استفاده در وظایف مثال.
پوشه وظایف کجا قرار دارد؟
Shadcn-ui/ui از روتر برنامه استفاده می کند و پوشه وظایف در پوشه نمونه ها قرار دارد که در (app) یک گروه مسیر در Next.js قرار دارد.
در پوشه وظایف چیست؟
همانطور که از تصویر بالا می بینید، پوشه اجزا، داده، 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'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"
اجزای مدولار داخل پوشه کارت را فراموش نکنید.
آیا می خواهید یاد بگیرید که چگونه 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
منابع:
- https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/cards