feat: update tag detail page

Author: luannguyenQV

apps/web/@/molecules/posts/post-detail/index.tsx

@@ -38,7 +38,11 @@ export default function PostDetail({ post }: PostDetailProps) {
         <PostMeta post={post} />
 
         <TagListMeta
-          tags={post?.tagOnPost}
+          tags={post?.tagOnPost?.map((tag) => ({
+            id: tag.tag.id,
+            slug: tag.tag.slug,
+            name: tag.tag.name,
+          }))}
           classes={{
             container: "mt-4",
           }}

apps/web/@/molecules/posts/post-item/index.tsx

@@ -15,6 +15,7 @@ import PostMeta from "./post-meta"
 
 export default function PostItem({ post }: { post: TPostItem }) {
   const t = useTranslations("common")
+  console.log(post)
 
   return (
     <div className="mb-4 flex rounded-sm border px-8 py-4">
@@ -35,7 +36,7 @@ export default function PostItem({ post }: { post: TPostItem }) {
         <PostMeta post={post} />
 
         <TagListMeta
-          tags={post?.tagOnPost}
+          tags={post?.tagOnPost?.map((tag) => tag?.tag)}
           classes={{
             container: "mt-2",
           }}

apps/web/@/molecules/posts/post-list/index.tsx

@@ -4,16 +4,18 @@ import React, { useCallback, useState } from "react"
 import { useParams } from "next/navigation"
 
 import { getPosts, TGetPostsRequest, TPostItem } from "database"
+import { cn } from "ui"
 
 import InfiniteScroll from "@/molecules/infinite-scroll"
 
 import PostItem from "../post-item"
 
 export type TPostListProps = {
   getPostParams?: TGetPostsRequest
+  containerClassName?: string
 }
 
-export default function PostList({ getPostParams = {} }: TPostListProps) {
+export default function PostList({ getPostParams = {}, containerClassName }: TPostListProps) {
   const searchParams = useParams()
   const [isLoading, setIsLoading] = useState(false)
   const [posts, setPosts] = useState<TPostItem[]>([])
@@ -37,7 +39,7 @@ export default function PostList({ getPostParams = {} }: TPostListProps) {
   }, [searchParams, page])
 
   return (
-    <div className="mt-4">
+    <div className={cn("mt-4", containerClassName)}>
       <InfiniteScroll
         loading={isLoading}
         nextPage={loadPosts}

apps/web/@/molecules/tag/tag-badge/index.tsx

@@ -20,7 +20,7 @@ const TagBadge: React.FC<TagBadgeProps> = ({ tag }) => {
     <Link
       key={tag.id}
       href={generatePath(APP_ROUTES.TAG, {
-        tagId: tag.slug,
+        tagId: tag.slug || tag.id,
       })}
     >
       <Badge

apps/web/@/molecules/tag/tag-detail/index.tsx

@@ -1,14 +1,22 @@
 import Link from "next/link"
+import { notFound } from "next/navigation"
 
-import { TTagItem } from "database"
+import { getTag } from "database"
 import { Tag } from "lucide-react"
-import { Button, Card, CardContent, CardHeader } from "ui"
+import { getTranslations } from "next-intl/server"
+import { Button, Card, CardContent, CardHeader, Typography } from "ui"
 
-export type TagDetailProp = {
-  tag: TTagItem
-}
+export default async function TagDetail({ tagIdOrSlug }: { tagIdOrSlug: string }) {
+  const t = await getTranslations()
+
+  const { data: tag, error } = await getTag({
+    tagIdOrSlug,
+  })
+
+  if (error) {
+    return notFound()
+  }
 
-const TagDetail = ({ tag }: TagDetailProp) => {
   return (
     <div className="col-span-4">
       <Card>
@@ -19,9 +27,9 @@ const TagDetail = ({ tag }: TagDetailProp) => {
         </CardHeader>
         <CardContent>
           <div className="flex flex-col items-center justify-center gap-2">
-            <h1 className="flex-1 text-center text-4xl font-extrabold text-slate-700">
+            <Typography variant="h1">
               <Link href={`/tags/${tag?.slug || tag?.id}`}>{tag.name}</Link>
-            </h1>
+            </Typography>
             <div className="mt-4 flex w-full flex-1 divide-x">
               <div className="flex flex-1 flex-col items-center justify-center">
                 <div className="font-bold text-slate-800">{tag?._count?.tagOnPost || 0}</div>
@@ -40,13 +48,11 @@ const TagDetail = ({ tag }: TagDetailProp) => {
               className="mt-4 w-full"
               variant="outline"
             >
-              Follow
+              {t("common.follow")}
             </Button>
           </div>
         </CardContent>
       </Card>
     </div>
   )
 }
-
-export default TagDetail

apps/web/@/molecules/tag/tag-list-meta/index.tsx

@@ -6,7 +6,7 @@ import { cn } from "ui"
 import TagBadge from "../tag-badge"
 
 export type TagListProps = {
-  tags: TTagItem[]
+  tags: Pick<TTagItem, "id" | "name" | "slug">[]
   classes?: {
     container?: string
   }

apps/web/app/[lang]/(public-fullwidth)/posts/[postId]/page.tsx

@@ -33,8 +33,6 @@ export default async function Page({
   const post = await getPost({ postIdOrSlug: params?.postId })
   const session = await getServerSession()
 
-  console.log(">>>>", post)
-
   if (
     !post ||
     (post.data?.postStatus === PostStatus.DRAFT && session?.user?.id !== post?.data?.author?.id)

apps/web/app/[lang]/(public-fullwidth)/tags/[tagId]/page.tsx

@@ -1,27 +1,28 @@
-import { getPosts, getTag } from "database"
+import { getTag } from "database"
 
-import { DEFAULT_PAGE_LIMIT } from "@/constants"
-import NoItemFounded from "@/molecules/no-item-founded"
-import TagPagination from "@/molecules/pagination"
-import PostItem from "@/molecules/posts/post-item"
 import PostList from "@/molecules/posts/post-list"
 import TagDetail from "@/molecules/tag/tag-detail"
 
-export const metadata = {
-  title: "Tags",
-  description: "A list of tags used in the blog posts",
+export const generateMetadata = async ({ params }) => {
+  const { data: tag, error } = await getTag({
+    tagIdOrSlug: params?.tagId,
+  })
+
+  return {
+    title: tag?.name,
+    description: tag?.description,
+  }
 }
 
 export default async function Page({ searchParams, params }) {
-  console.log(params?.tagId)
-
   return (
     <div className="grid grid-cols-12 gap-10">
-      {/* <TagDetail /> */}
+      <TagDetail tagIdOrSlug={params?.tagId} />
 
       <PostList
+        containerClassName="col-span-8 mt-0"
         getPostParams={{
-          tag: "reactjs",
+          tag: params?.tagId,
         }}
       />
     </div>