decal

src/components/LogoPanel.tsx

@@ -1,12 +1,13 @@
 import { useState } from "react";
-import { AddIcon } from "@chakra-ui/icons";
+import { AddIcon, DeleteIcon } from "@chakra-ui/icons";
 import {
     Button,
     Modal,
     ModalBody,
     ModalContent,
     ModalOverlay,
-    Image
+    Image,
+    IconButton
 } from "@chakra-ui/react";
 import { pickFile } from "@/lib/upload";
 import useModelStore, { StickerType } from "@/store/useModelStore";
@@ -30,10 +31,13 @@ const LogoPanel = () => {
                                 setActiveDecal(decal.id)
                             }}
                             key={decal.id}
-                            className={`mb-2 flex h-12 w-full cursor-pointer items-center justify-between rounded bg-white px-2 shadow ${decal.id === activeDecal ? "border-2 border-green-100" : ""
+                            className={`mb-2 flex h-12 w-full cursor-pointer items-center justify-between rounded bg-white px-2 shadow ${decal.id === activeDecal ? "border-2 border-green-100 bg-blue-200" : ""
                                 }`}
                         >
                             <Image className={"w-12 h-12 object-contain"} src={decal.url} />
+                            <IconButton icon={<DeleteIcon />} aria-label={""} colorScheme="red" size={"xs"} onClick={() => {
+                                setDecals(decals.filter(el => el.id !== decal.id))
+                            }} />
                         </li>
                     ))}
             </ul>