fix: fixing detail content and update content contributro

app/[locale]/(public)/image/filter/page.tsx

@@ -823,7 +823,7 @@ const FilterPage = () => {
                             <Link href={`/image/detail/${image?.slug}`}>
                               {/* <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" /> */}
                               <div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
-                                {/* <ImageBlurry
+                                <ImageBlurry
                                   src={
                                     image?.smallThumbnailLink ||
                                     image?.thumbnailLink
@@ -834,8 +834,8 @@ const FilterPage = () => {
                                     width: "100%",
                                     height: "100%",
                                   }}
-                                /> */}
+                                />
-                                <Image
+                                {/* <Image
                                   width={2560}
                                   height={1440}
                                   src={
@@ -843,8 +843,8 @@ const FilterPage = () => {
                                     image?.thumbnailLink
                                   }
                                   alt={image?.title}
-                                  className="w-full h-full object-cover rounded-t-lg"
+                                  className="w-full h-full object-contain rounded-t-lg"
-                                />
+                                /> */}
                               </div>
                               <div className="flex flex-row items-center gap-2 text-[10px] mx-1 mt-2">
                                 {formatDateToIndonesian(

app/[locale]/(public)/video/filter/page.tsx

@@ -833,7 +833,7 @@ const FilterPage = () => {
                             <Link href={`/video/detail/${video?.slug}`}>
                               {/* <img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> */}
                               <div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
-                                {/* <ImageBlurry
+                                <ImageBlurry
                                   src={
                                     video?.smallThumbnailLink ||
                                     video?.thumbnailLink
@@ -844,8 +844,8 @@ const FilterPage = () => {
                                     width: "100%",
                                     height: "100%",
                                   }}
-                                /> */}
+                                />
-                                <Image
+                                {/* <Image
                                   width={2560}
                                   height={1440}
                                   src={
@@ -854,7 +854,7 @@ const FilterPage = () => {
                                   }
                                   alt={video?.title}
                                   className="w-full h-full object-cover rounded-t-lg"
-                                />
+                                /> */}
                               </div>
                               <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
                                 {formatDateToIndonesian(

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

@@ -166,7 +166,15 @@ export default function FormImageUpdate() {
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop: (acceptedFiles) => {
-      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+      // setFiles(acceptedFiles.map((file) => Object.assign(file)));
+      setFiles((prevFiles) => [
+        ...prevFiles,
+        ...acceptedFiles.map((file) =>
+          Object.assign(file, {
+            preview: URL.createObjectURL(file),
+          })
+        ),
+      ]);
     },
     accept: {
       "image/*": [],
@@ -270,6 +278,19 @@ export default function FormImageUpdate() {
           setSelectedOptions(initialOptions);
         }
 
+        if (details?.files) {
+          const formattedFiles = details.files.map((file: any) => ({
+            ...file,
+            id: file.id,
+            fileName: file.fileName,
+            size: file.size,
+            thumbnailFileUrl: file.thumbnailFileUrl,
+            url: file.url,
+          }));
+
+          setFiles(formattedFiles);
+        }
+
         if (details?.publishedFor) {
           // Split string "7" to an array ["7"] if needed
           setPublishedFor(details.publishedFor.split(","));
@@ -503,15 +524,41 @@ export default function FormImageUpdate() {
     setFiles([]);
   };
 
-  const renderFilePreview = (file: FileWithPreview) => {
+  // const renderFilePreview = (file: FileWithPreview) => {
-    if (file?.type?.startsWith("image")) {
+  //   if (file?.type?.startsWith("image")) {
+  //     return (
+  //       <Image
+  //         width={48}
+  //         height={48}
+  //         alt={file.name}
+  //         src={URL.createObjectURL(file)}
+  //         className=" rounded border p-0.5"
+  //       />
+  //     );
+  //   } else {
+  //     return <Icon icon="tabler:file-description" />;
+  //   }
+  // };
+
+  const renderFilePreview = (file: FileWithPreview | any) => {
+    if (file?.preview || file instanceof File) {
       return (
         <Image
           width={48}
           height={48}
           alt={file.name}
-          src={URL.createObjectURL(file)}
+          src={file.preview || URL.createObjectURL(file)}
-          className=" rounded border p-0.5"
+          className="rounded border p-0.5"
+        />
+      );
+    } else if (file.thumbnailFileUrl) {
+      return (
+        <Image
+          width={48}
+          height={48}
+          alt={file.fileName}
+          src={file.thumbnailFileUrl}
+          className="rounded border p-0.5"
         />
       );
     } else {
@@ -525,9 +572,44 @@ export default function FormImageUpdate() {
     setFiles([...filtered]);
   };
 
+  // const fileList = files.map((file: any) => (
+  //   <div
+  //     key={file.id}
+  //     className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
+  //   >
+  //     <div className="flex gap-3 items-center">
+  //       <div className="file-preview">{renderFilePreview(file)}</div>
+  //       <div>
+  //         <div className="text-sm text-card-foreground">
+  //           {file.fileName || file.name}
+  //         </div>
+  //         <div className="text-xs font-light text-muted-foreground">
+  //           {Math.round(file.size / 100) / 10 > 1000 ? (
+  //             <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+  //           ) : (
+  //             <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+  //           )}
+  //           {" kb"}
+  //         </div>
+  //       </div>
+  //     </div>
+
+  //     <Button
+  //       type="button"
+  //       size="icon"
+  //       color="destructive"
+  //       variant="outline"
+  //       className="border-none rounded-full"
+  //       onClick={() => handleDeleteFile(file.id)}
+  //     >
+  //       <Icon icon="tabler:x" className="h-5 w-5" />
+  //     </Button>
+  //   </div>
+  // ));
+
   const fileList = files.map((file: any) => (
     <div
-      key={file.id}
+      key={file.id || file.name}
       className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
     >
       <div className="flex gap-3 items-center">

components/main/image-detail.tsx

@@ -537,7 +537,7 @@ const DetailImage = (data: any) => {
                   height={1440}
                   src={detailDataImage?.files[selectedImage]?.url}
                   alt="Main"
-                  className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px] object-cover"
+                  className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-full object-contain"
                 />
 
                 <div className="absolute top-4 right-4"></div>