[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":12,"_29":30,"_31":30,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","67c9a1e123f88191b440211a4cf06041","versionInt","title","Image Library Prototype","type","code/react","content","import { useState } from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { motion } from \"framer-motion\";\nimport { Dialog, DialogContent, DialogHeader, DialogFooter, DialogTitle } from \"@/components/ui/dialog\";\n\nconst initialImages = [\n \"https://picsum.photos/300/300?random=1\",\n \"https://picsum.photos/300/300?random=2\",\n \"https://picsum.photos/300/300?random=3\",\n \"https://picsum.photos/300/300?random=4\",\n \"https://picsum.photos/300/300?random=5\",\n];\n\nexport default function ImageLibrary() {\n const [images, setImages] = useState(initialImages);\n const [selectedImages, setSelectedImages] = useState([]);\n const [deleteImage, setDeleteImage] = useState(null);\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const toggleSelect = (image) => {\n setSelectedImages((prev) =>\n prev.includes(image)\n ? prev.filter((img) => img !== image)\n : [...prev, image]\n );\n };\n\n const confirmDelete = (image) => {\n setDeleteImage(image);\n setIsModalOpen(true);\n };\n\n const handleDelete = () => {\n setImages((prev) => prev.filter((img) => img !== deleteImage));\n setSelectedImages((prev) => prev.filter((img) => img !== deleteImage));\n setIsModalOpen(false);\n setDeleteImage(null);\n };\n\n return (\n

\n {images.map((img, index) => (\n \n toggleSelect(img)}\n >\n \n {`Image

\n \n \n {selectedImages.includes(img) && (\n \n )}\n \n ))}\n\n {selectedImages.length > 0 && (\n

\n \n

\n )}\n\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch","shouldPrefetchAccount",true,"shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","17528269079922398931","traceTime",1777514799755]