🚧 wip: share genre tags UI for reuse

app/(session)/(main)/anime/[slug]/page.tsx

@@ -0,0 +1,9 @@
+import AnimeIndex from "@/features/anime";
+
+export default function page() {
+  return (
+    <div>
+      <AnimeIndex />
+    </div>
+  );
+}

features/anime/actions/getAnimeBySlug.ts

@@ -0,0 +1,96 @@
+export interface GetAnimeBySlugResponse {
+  success: boolean;
+  status: number;
+  message: string;
+  data: {
+    id: string;
+    title: string;
+    titleAlternative: {
+      type: string;
+      title: string;
+    }[];
+    genres: {
+      slug: string;
+      name: string;
+    }[];
+    slug: string;
+    malId: number;
+    pictureMedium: string;
+    pictureLarge: string;
+    country: string;
+    score: string;
+    status: string;
+    startAiring: string;
+    endAiring: string;
+    synopsis: string;
+    ageRating: string;
+    mediaType: string;
+    source: string;
+    onDraft: boolean;
+    uploadedBy: string;
+    deletedAt: null | string;
+    createdAt: string;
+    updatedAt: string;
+  };
+}
+
+export const getAnimeBySlug = async (
+  slug: string,
+): Promise<GetAnimeBySlugResponse> => {
+  return {
+    success: true,
+    status: 200,
+    message: "Media fetched successfully",
+    data: {
+      id: "019cc6ea-5f59-70ec-8c64-2c716a32e0a9",
+      title: "Sakamoto Days",
+      titleAlternative: [
+        {
+          type: "Default",
+          title: "Sakamoto Days",
+        },
+        {
+          type: "Japanese",
+          title: "SAKAMOTO DAYS",
+        },
+        {
+          type: "English",
+          title: "Sakamoto Days",
+        },
+      ],
+      genres: [
+        {
+          slug: "action",
+          name: "Action",
+        },
+        {
+          slug: "slice-of-life",
+          name: "Slice of Life",
+        },
+        {
+          slug: "comedy",
+          name: "Comedy",
+        },
+      ],
+      slug: "sakamoto-days",
+      malId: 58939,
+      pictureMedium: "https://myanimelist.net/images/anime/1026/146459.webp",
+      pictureLarge: "https://myanimelist.net/images/anime/1026/146459l.webp",
+      country: "JP",
+      score: "7.59",
+      status: "Finished Airing",
+      startAiring: "2025-01-11T00:00:00.000Z",
+      endAiring: "2025-03-22T00:00:00.000Z",
+      synopsis:
+        "The name Tarou Sakamoto once instilled fear in every villain. No other professional hitman matched his prowess, and fellow assassins revered him. However, Sakamoto fell in love. In five short years, he married, became a father, put on some weight, and traded his weapons for an apron as he became the owner of a humble convenience store.\n\nAlthough Sakamoto is decidedly retired, he finds his old life of crime hard to shake off. His former partner, Shin Asakura, reappears and resolves to stay with Sakamoto's family under their strict no-kill rule. To make matters worse, a large bounty is placed on Sakamoto's head. Numerous assassins now pursue him—but they are in for a surprise. Sakamoto has not lost his edge, and no matter what tricks his enemies pull, he will fight off every last one to protect his dear family.\n\n[Written by MAL Rewrite]",
+      ageRating: "R - 17+ (violence & profanity)",
+      mediaType: "TV",
+      source: "Manga",
+      onDraft: false,
+      uploadedBy: "019c0645-a3b5-747a-83bb-0fca3040f951",
+      deletedAt: null,
+      createdAt: "2026-02-19T14:35:00.053Z",
+      updatedAt: "2026-03-07T06:09:34.575Z",
+    },
+  };
+};

features/anime/index.tsx

@@ -0,0 +1,11 @@
+import AnimeInformation from "./sections/Information/wrapper";
+
+const AnimeIndex = () => {
+  return (
+    <div>
+      <AnimeInformation />
+    </div>
+  );
+};
+
+export default AnimeIndex;

features/anime/sections/Information/main.client.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { GetAnimeBySlugResponse } from "../../actions/getAnimeBySlug";
+import GenreTags from "@/shared/components/GenreTags";
+
+const AnimeInformationClient = ({ data }: { data: GetAnimeBySlugResponse }) => {
+  return (
+    <section className="flex gap-4">
+      <div>
+        <img
+          src={data.data.pictureMedium}
+          alt={data.data.title}
+          className="h-fit w-78 overflow-hidden rounded-lg"
+        />
+      </div>
+      <div className="tracking-tight">
+        <div className="flex flex-col gap-0.5">
+          <h1 className="tracking-tighter text-5xl font-bold">
+            {data.data.title}
+          </h1>
+          <h3 className="ml-0.5 tracking-tight text-xl font-medium text-muted-foreground">
+            {data.data.titleAlternative[0].title}
+          </h3>
+        </div>
+        <div className="mt-2">
+          <GenreTags genres={data.data.genres} />
+        </div>
+        <table>
+          <tbody>
+            <tr className="">
+              <td className="font-medium text-sm text-muted-foreground">
+                Score
+              </td>
+              <td className="text-sm">{data.data.score}</td>
+            </tr>
+            <tr>
+              <td className="font-medium text-sm text-muted-foreground">
+                Status
+              </td>
+              <td className="text-sm">{data.data.status}</td>
+            </tr>
+            <tr>
+              <td className="font-medium text-sm text-muted-foreground">
+                Airing
+              </td>
+              <td className="text-sm">
+                {data.data.startAiring} - {data.data.endAiring}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+};
+
+export default AnimeInformationClient;

features/anime/sections/Information/main.tsx

@@ -0,0 +1,14 @@
+import { getAnimeBySlug } from "../../actions/getAnimeBySlug";
+import AnimeInformationClient from "./main.client";
+
+const AnimeInformationMain = async () => {
+  const data = async () => await getAnimeBySlug("sakamoto-days");
+  const result = await data();
+  return (
+    <div>
+      <AnimeInformationClient data={result} />
+    </div>
+  );
+};
+
+export default AnimeInformationMain;

features/anime/sections/Information/skeleton.tsx

@@ -0,0 +1,3 @@
+export const AnimeInformationSkeleton = () => {
+  return <div>Loading...</div>;
+};

features/anime/sections/Information/wrapper.tsx

@@ -0,0 +1,15 @@
+import React, { Suspense } from "react";
+import AnimeInformationMain from "./main";
+import { AnimeInformationSkeleton } from "./skeleton";
+
+const AnimeInformation = () => {
+  return (
+    <div>
+      <Suspense fallback={<AnimeInformationSkeleton />}>
+        <AnimeInformationMain />
+      </Suspense>
+    </div>
+  );
+};
+
+export default AnimeInformation;

features/home/sections/Hero/components/Swiper.tsx

@@ -7,6 +7,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import { Icon } from "@iconify/react";
 import Link from "next/link";
 import AddToList from "./AddToList";
+import GenreTags from "@/shared/components/GenreTags";
 
 export interface HeroSwiperProps {
   data: {
@@ -50,21 +51,15 @@ const HeroSwiper = (props: HeroSwiperProps) => {
               <h1 className="text-6xl font-semibold tracking-tight">
                 {slide.title}
               </h1>
-              <div className="mt-4 flex gap-1.5">
+              <div className="mt-4">
-                {slide.genres.map((genre) => (
+                <GenreTags genres={slide.genres} />
-                  <Link href={`/genres/${genre.slug}`} key={genre.slug}>
-                    <Badge className="bg-neutral-100/60 backdrop-blur-lg text-neutral-800">
-                      {genre.name}
-                    </Badge>
-                  </Link>
-                ))}
               </div>
               <p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6">
                 {slide.synopsis}
               </p>
               <div className="flex gap-2 mt-6 h-12">
                 <Link
-                  href={`/media/${slide.slug}`}
+                  href={`/anime/${slide.slug}`}
                   className="w-fit h-full rounded-xl overflow-hidden"
                 >
                   <Button

shared/components/GenreTags.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { Badge } from "../libs/shadcn/ui/badge";
+
+type GenreTagsProps = {
+  genres: {
+    slug: string;
+    name: string;
+  }[];
+};
+
+const GenreTags = ({ genres }: GenreTagsProps) => {
+  return (
+    <div className="flex gap-1.5">
+      {genres.map((genre, index) => (
+        <Link href={`/genres/${genre.slug}`} key={index}>
+          <Badge className="bg-neutral-100/60 backdrop-blur-lg text-neutral-800">
+            {genre.name}
+          </Badge>
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default GenreTags;