🚧 wip: share genre tags UI for reuse

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,14 +51,8 @@ const HeroSwiper = (props: HeroSwiperProps) => {
               <h1 className="text-6xl font-semibold tracking-tight">
                 {slide.title}
               </h1>
-              <div className="mt-4 flex gap-1.5">
-                {slide.genres.map((genre) => (
-                  <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 className="mt-4">
+                <GenreTags genres={slide.genres} />
               </div>
               <p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6">
                 {slide.synopsis}