DEV Community

Cover image for shadcn-ui/ui codebase analysis: Tasks example explained.
Ramu Narasinga
Ramu Narasinga

Posted on • Updated on

shadcn-ui/ui codebase analysis: Tasks example explained.

In this article, we will learn about Tasks example in shadcn-ui/ui. This article consists of the following sections:

  1. Where is tasks folder located?
  2. What is in tasks folder?
  3. Components used in tasks example.

Where is tasks folder located?

Shadcn-ui/ui uses app router and tasks folder is located in examples folder, which is located in (app), a route group in Next.js.

What is in tasks folder?

As you can see from the above image, we have components folder, data, page.tsx.

page.tsx is loaded in place of {children} in examples/layout.tsx.

Below is the code picked from 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>
    </>
  )
}


Enter fullscreen mode Exit fullscreen mode

Components used in tasks example.

To find out the components used in this cards example, we can simply look at the imports used at the top of page.



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


Enter fullscreen mode Exit fullscreen mode

Do not forget the modular components inside cards folder.

Get free courses inspired by the best practices used in open source.

About me:

Website: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

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

Email: ramu.narasinga@gmail.com

Learn the best practices used in open source.

References:

  1. https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/cards

Top comments (0)