feat: allow to select/de-select image

Author: luannguyenQV

apps/web/@/molecules/upload/ImageList.tsx

@@ -1,38 +1,57 @@
-import React from "react"
+import React, { useState } from "react"
 import Image from "next/image"
 
 import { Image as ImageType } from "database"
-import { TrashIcon } from "lucide-react"
+import { Check, Circle, TrashIcon } from "lucide-react"
 import { Button } from "ui"
 
 type ImageListProps = {
   images: ImageType[]
 }
 
 const ImageList: React.FC<ImageListProps> = ({ images }) => {
+  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null)
+
   return (
-    <div className="mt-2 grid grid-cols-5 gap-3">
+    <div className="mt-2 flex flex-wrap gap-3">
       {images?.map((image) => (
         <div
           key={image.id}
-          className="group relative"
+          className="group relative border"
         >
           <Image
             src={`${process.env.NEXT_PUBLIC_FRONTEND_URL}${image.url}`}
-            alt={`Image ${image.id}`}
-            width={90}
-            height={90}
-            className="h-[90px] w-[90px] cursor-pointer object-cover"
-            // onClick={() => handleSelect(image.id)}
+            alt={`Image ${image.name}`}
+            width={160}
+            height={160}
+            className="cursor-pointe h-[160px] w-[160px] bg-gray-300 object-cover"
           />
           <Button
             variant="destructive"
             size="icon"
-            className="absolute right-1 top-1 opacity-0 transition-opacity group-hover:opacity-100"
-            // onClick={() => handleDelete(image.id)}
+            className="absolute bottom-1 right-1 h-7 w-7 rounded-full opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={() => console.log("delete")}
           >
             <TrashIcon className="h-4 w-4" />
           </Button>
+          <Button
+            variant="outline"
+            className="absolute right-1 top-1 h-7 w-7 rounded-full p-0"
+            onClick={() => {
+              console.log(image)
+
+              setSelectedImage(image)
+            }}
+          >
+            {selectedImage?.id === image.id ? (
+              <Check
+                strokeWidth={1.5}
+                className="h-6 w-6 text-blue-500"
+              />
+            ) : (
+              <Circle className="h-6 w-6" />
+            )}
+          </Button>
         </div>
       ))}
     </div>

apps/web/package.json

@@ -40,7 +40,7 @@
     "html-react-parser": "^5.0.11",
     "isomorphic-dompurify": "^2.14.0",
     "lowlight": "^3.1.0",
-    "lucide-react": "^0.270.0",
+    "lucide-react": "^0.427.0",
     "negotiator": "^0.6.3",
     "next": "14.2.0-canary.50",
     "next-auth": "^4.24.5",