feat:detail file media

components/form/content/image-detail-form.tsx

@@ -31,6 +31,8 @@ import {
 import { detailMedia } from "@/service/curated-content/curated-content";
 import { Badge } from "@/components/ui/badge";
 import { MailIcon } from "lucide-react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -82,6 +84,8 @@ export default function FormImageDetail() {
   const [detail, setDetail] = useState<Detail>();
   const [refresh, setRefresh] = useState(false);
   const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+  const [detailThumb, setDetailThumb] = useState<any>([]);
+  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
 
   const [selectedTarget, setSelectedTarget] = useState("");
   const [unitSelection, setUnitSelection] = useState({
@@ -192,6 +196,12 @@ export default function FormImageDetail() {
         }
 
         setSelectedTarget(details.categoryId); // Untuk dropdown
+
+        const filesData = details.files || [];
+        const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) =>
+          file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg"
+        );
+        setDetailThumb(fileUrls);
       }
     }
     initState();
@@ -319,6 +329,48 @@ export default function FormImageDetail() {
                     </p>
                   )}
                 </div>
+
+                <Label className="text-xl text-black">File Media</Label>
+                <div className="w-full  ">
+                  <Swiper
+                    thumbs={{ swiper: thumbsSwiper }}
+                    modules={[FreeMode, Navigation, Thumbs]}
+                    navigation={false}
+                    className="w-full"
+                  >
+                    {detailThumb?.map((data: any) => (
+                      <SwiperSlide key={data.id}>
+                        <img
+                          className="object-fill h-full w-full"
+                          src={data}
+                          alt={` ${data.id}`}
+                        />
+                      </SwiperSlide>
+                    ))}
+                  </Swiper>
+                  <div className=" mt-2 ">
+                    <Swiper
+                      onSwiper={setThumbsSwiper}
+                      slidesPerView={6}
+                      spaceBetween={8}
+                      pagination={{
+                        clickable: true,
+                      }}
+                      modules={[Pagination, Thumbs]}
+                      // className="mySwiper2"
+                    >
+                      {detailThumb?.map((data: any) => (
+                        <SwiperSlide key={data.id}>
+                          <img
+                            className="object-cover h-[60px] w-[80px]"
+                            src={data}
+                            alt={` ${data.id}`}
+                          />
+                        </SwiperSlide>
+                      ))}
+                    </Swiper>
+                  </div>
+                </div>
               </div>
             </div>
           </Card>