shadcn-ui/taxonomy を実装する

[spring1018]

shadcn が公開してる以下が一番良さそう。 https://tx.shadcn.com/ https://github.com/shadcn-ui/taxonomy

[spring1018]

/

https://tx.shadcn.com/

page

app/(marketing)/page.tsx https://github.com/shadcn-ui/taxonomy/blob/651f984e52edd65d40ccd55e299c1baeea3ff017/app/(marketing)/page.tsx

memo

• Login ボタンを押すと /dashboard に遷移する

実装

• https://github.com/spring1018/react-ui/pull/62

[spring1018]

/dashboard

page

https://github.com/shadcn-ui/taxonomy/blob/651f984e52edd65d40ccd55e299c1baeea3ff017/app/(dashboard)/dashboard/page.tsx

memo

post item のコンポーネント: https://github.com/spring1018/react-ui/issues/59#issuecomment-1962802236

new post を押すと、https://github.com/spring1018/react-ui/issues/59#issuecomment-1962799524

      <DashboardHeader heading="Posts" text="Create and manage posts.">
        <PostCreateButton />
      </DashboardHeader>

以下の部分で認証をチェックしている。 https://github.com/shadcn-ui/taxonomy/blob/651f984e52edd65d40ccd55e299c1baeea3ff017/app/(dashboard)/dashboard/page.tsx#L17-L21

  const user = await getCurrentUser()

  if (!user) {
    redirect(authOptions?.pages?.signIn || "/login")
  }

実装

• https://github.com/spring1018/react-ui/pull/64

[spring1018]

lib/db.ts

これを使って post を取得している。 https://github.com/shadcn-ui/taxonomy/blob/651f984e52edd65d40ccd55e299c1baeea3ff017/lib/db.ts

import { PrismaClient } from "@prisma/client"

declare global {
  // eslint-disable-next-line no-var
  var cachedPrisma: PrismaClient
}

let prisma: PrismaClient
if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient()
} else {
  if (!global.cachedPrisma) {
    global.cachedPrisma = new PrismaClient()
  }
  prisma = global.cachedPrisma
}

export const db = prisma

[spring1018]

components/post-create-button.tsx

https://github.com/shadcn-ui/taxonomy/blob/main/components/post-create-button.tsx

memo

• 押した時点で post は作られる
• editor に遷移

  router.push(`/editor/${post.id}`)

[spring1018]

/editor

https://github.com/shadcn-ui/taxonomy/blob/main/app/(editor)/editor/%5BpostId%5D/page.tsx

components/editor.tsx

https://github.com/shadcn-ui/taxonomy/blob/main/components/editor.tsx

[spring1018]

スキーマ

https://github.com/shadcn-ui/taxonomy/blob/main/prisma/schema.prisma post があれば一旦ここまでは作れそう？(User も必要)

model Post {
  id        String   @id @default(cuid())
  title     String
  content   Json?
  published Boolean  @default(false)
  createdAt DateTime @default(now()) @map(name: "created_at")
  updatedAt DateTime @default(now()) @map(name: "updated_at")
  authorId  String

  author User @relation(fields: [authorId], references: [id])

  @@map(name: "posts")
}

[spring1018]

components/post-item.tsx

https://github.com/shadcn-ui/taxonomy/blob/main/components/post-item.tsx

...
export function PostItem({ post }: PostItemProps) {
  return (
    <div className="flex items-center justify-between p-4">
      <div className="grid gap-1">
        <Link
          href={`/editor/${post.id}`}
          className="font-semibold hover:underline"
        >
          {post.title}
        </Link>
        <div>
          <p className="text-sm text-muted-foreground">
            {formatDate(post.createdAt?.toDateString())}
          </p>
        </div>
      </div>
      <PostOperations post={{ id: post.id, title: post.title }} />
    </div>
  )
}
...

memo

post-operation: https://github.com/spring1018/react-ui/issues/59#issuecomment-1962802522

[spring1018]

components/post-operations.tsx

https://github.com/shadcn-ui/taxonomy/blob/main/components/post-operations.tsx

[spring1018]

navbar

https://github.com/shadcn-ui/taxonomy/blob/main/components/main-nav.tsx#L18 https://github.com/spring1018/react-ui/commit/ae1e031033fae6a50da78d876c24e01d78a36db9

[spring1018]

テーマ

https://github.com/spring1018/react-ui/commit/354e008681484c21b27a8089c87da7da8ab9ae5d

[spring1018]

気になる部分は実装できたので Close