♻️ refactor: extract bookmark logic from banner component

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

@@ -0,0 +1,23 @@
+import { useAuth } from "@/shared/contexts/AuthContext";
+import { Button } from "@/shared/libs/shadcn/ui/button";
+import { Icon } from "@iconify/react";
+
+const AddToList = ({ mediaId }: { mediaId: string }) => {
+  const { session } = useAuth();
+
+  return (
+    <div>
+      {session?.user && (
+        <Button
+          variant="secondary"
+          className="h-full flex gap-1 px-4 rounded-xl border border-neutral-400/10 bg-neutral-950/20 hover:bg-neutral-950/40 backdrop-blur-lg text-neutral-200"
+        >
+          <Icon icon="boxicons:bookmark" className="size-5.5" />
+          <span>Add to List</span>
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default AddToList;

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

@@ -2,10 +2,11 @@
 import "swiper/css";
 import { Badge } from "@/shared/libs/shadcn/ui/badge";
 import { Button } from "@/shared/libs/shadcn/ui/button";
-import { useRouter } from "next/navigation";
 import { Autoplay, Navigation, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Icon } from "@iconify/react";
+import Link from "next/link";
+import AddToList from "./AddToList";
 
 export interface HeroSwiperProps {
   data: {
@@ -22,7 +23,6 @@ export interface HeroSwiperProps {
 }
 
 const HeroSwiper = (props: HeroSwiperProps) => {
-  const router = useRouter();
   return (
     <div className="h-full rounded-lg overflow-hidden">
       <Swiper
@@ -34,8 +34,8 @@ const HeroSwiper = (props: HeroSwiperProps) => {
         autoplay={{ delay: 5000, disableOnInteraction: false }}
         modules={[Autoplay, Pagination, Navigation]}
       >
-        {props.data.map((slide) => (
+        {props.data.map((slide, index) => (
-          <SwiperSlide key={slide.id} className="relative overflow-hidden">
+          <SwiperSlide key={index} className="relative overflow-hidden">
             <img
               src={slide.imageUrl}
               alt={slide.title}
@@ -53,32 +53,38 @@ const HeroSwiper = (props: HeroSwiperProps) => {
               </h1>
               <div className="mt-4 flex gap-1.5">
                 {slide.genres.map((genre) => (
-                  <Badge
+                  <Link href={`/genres/${genre.slug}`} key={genre.slug}>
-                    className="bg-neutral-200 text-neutral-800"
+                    <Badge className="bg-neutral-100/60 backdrop-blur-lg text-neutral-800">
-                    key={genre.slug}
+                      {genre.name}
-                  >
+                    </Badge>
-                    {genre.name}
+                  </Link>
-                  </Badge>
                 ))}
               </div>
               <p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6">
                 {slide.synopsis}
               </p>
-              <Button
+              <div className="flex gap-2 mt-6 h-12">
-                size="lg"
+                <Link
-                onClick={() => router.push(`/media/${slide.slug}`)}
+                  href={`/media/${slide.slug}`}
-                className="mt-6 h-12 rounded-xl flex gap-2 px-4 hover:bg-neutral-950 group"
+                  className="w-fit h-full rounded-xl overflow-hidden"
-              >
+                >
-                <div className="bg-neutral-950 p-2 rounded-full group-hover:bg-primary">
+                  <Button
-                  <Icon
+                    size="lg"
-                    icon="solar:play-bold"
+                    className="h-full flex gap-2 px-4 hover:bg-neutral-950 group"
-                    className="text-primary group-hover:text-neutral-950"
+                  >
-                  />
+                    <div className="bg-neutral-950 p-2 rounded-full group-hover:bg-primary">
-                </div>
+                      <Icon
-                <span className="font-semibold text-neutral-950 group-hover:text-primary">
+                        icon="solar:play-bold"
-                  Watch Now
+                        className="text-primary group-hover:text-neutral-950"
-                </span>
+                      />
-              </Button>
+                    </div>
+                    <span className="font-semibold text-neutral-950 group-hover:text-primary">
+                      Watch Now
+                    </span>
+                  </Button>
+                </Link>
+                <AddToList mediaId={slide.id} />
+              </div>
             </div>
           </SwiperSlide>
         ))}