feat: add preview in detail image

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

@@ -79,9 +79,10 @@ export default function FormImageDetail() {
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategory, setSelectedCategory] = useState<any>();
   const [tags, setTags] = useState<any[]>([]);
-  const [detail, setDetail] = useState<Detail>();
+  const [detail, setDetail] = useState<any>();
   const [refresh, setRefresh] = useState(false);
   const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
+  const [main, setMain] = useState<any>([]);
 
   const [selectedTarget, setSelectedTarget] = useState("");
   const [unitSelection, setUnitSelection] = useState({
@@ -175,6 +176,12 @@ export default function FormImageDetail() {
         const details = response.data?.data;
 
         setDetail(details);
+        setMain({
+          type: details?.fileType.name,
+          url: details?.files[0]?.url,
+          names: details?.files[0]?.fileName,
+          format: details?.files[0]?.format,
+        });
 
         if (details.publishedForObject) {
           const publisherIds = details.publishedForObject.map(
@@ -245,6 +252,18 @@ export default function FormImageDetail() {
     });
   };
 
+  const handleMain = (type: string, url: string, names: string, format: string) => {
+    console.log("Test 3 :", type, url, names, format);
+    setMain({
+      type,
+      url,
+      names,
+      format,
+    });
+    return false;
+  };
+
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       {detail !== undefined ? (
@@ -319,6 +338,76 @@ export default function FormImageDetail() {
                     </p>
                   )}
                 </div>
+
+                <div className="py-3">
+                  <Label>Files</Label>
+                  {/* Preview Image */}
+                  <div className="w-full aspect-video mb-4 rounded-lg overflow-hidden bg-gray-100">
+                    <img 
+                      src={main.url}
+                      alt="Preview"
+                      className="w-full h-full object-cover transition-all duration-300"
+                    />
+                  </div>
+
+                  {/* Thumbnail Container with Navigation */}
+                  <div className="relative group">
+                    {/* Scroll Left Button */}
+                    {/* <button 
+                      onClick={scrollLeft}
+                      className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-black/50 p-2 rounded-r-lg 
+                                text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300
+                                hover:bg-black/70 disabled:opacity-0"
+                      aria-label="Scroll left"
+                    >
+                      <ChevronLeft className="w-6 h-6" />
+                    </button> */}
+
+                    {/* Scrollable Thumbnail Container */}
+                    <div 
+                      id="thumbnail-container"
+                      className="overflow-x-auto scrollbar-hide scroll-smooth"
+                      style={{
+                        scrollbarWidth: 'none',
+                        msOverflowStyle: 'none',
+                      }}
+                    >
+                      <div className="flex space-x-2 px-4">
+                        {detail?.files?.map((list: any, index: number) => (
+                          <button
+                            key={index}
+                            onClick={() => handleMain(
+                              "FOTO",
+                              list.url,
+                              list.fileName,
+                              list.format,
+                            )}
+                            className={`flex-shrink-0 relative aspect-video w-32 rounded-lg overflow-hidden 
+                              ${main.url === list.url ? 'ring-2 ring-blue-500' : 'hover:opacity-80'}
+                              transition-all duration-200`}
+                          >
+                            <img
+                              src={list.url}
+                              alt={`Thumbnail ${index + 1}`}
+                              className="w-full h-full object-cover"
+                            />
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Scroll Right Button */}
+                    {/* <button 
+                      onClick={scrollRight}
+                      className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-black/50 p-2 rounded-l-lg 
+                                text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300
+                                hover:bg-black/70 disabled:opacity-0"
+                      aria-label="Scroll right"
+                    >
+                      <ChevronRight className="w-6 h-6" />
+                    </button> */}
+                  </div>
+                </div>
               </div>
             </div>
           </Card>