Merge branch 'main' into main

src/components/svgCard.tsx

@@ -1,6 +1,13 @@
 import React from "react";
 import { SVGCardProps } from "@/interfaces/components";
-import { Box, Center, Image, Text, useColorModeValue } from "@chakra-ui/react";
+import {
+  Box,
+  Center,
+  Image,
+  Text,
+  useColorModeValue,
+  useDisclosure,
+} from "@chakra-ui/react";
 import Tap from "@/animations/tap";
 import CustomLink from "@/common/link";
 
@@ -8,29 +15,31 @@ const SVGCard = (props: SVGCardProps) => {
   const bg = useColorModeValue("bg.light", "bg.dark");
   const color = useColorModeValue("rgb(0,0,0, .1)", "rgb(255,255,255, .1)");
   return (
-    <Tap>
-      <CustomLink href={`/svg/${props.id}`}>
-        <Box
-          bg={bg}
-          p={4}
-          cursor="pointer"
-          borderRadius="10px"
-          borderWidth="1px"
-          mb="2"
-          _hover={{
-            border:`1px solid ${color}`,
-            transform: "scale(0.98)",
-          }}
-          transition="all 0.2s" >
-          <Center>
-            <Image boxSize="50px" src={props.svg} alt={props.title} />
-          </Center>
-          <Text mt="2" fontWeight="light" textAlign="center">
-            {props.title}
-          </Text>
-        </Box>
-      </CustomLink>
-    </Tap>
+    <>
+      <Tap>
+        <CustomLink href={`/svg/${props.id}`}>
+          <Box
+            bg={bg}
+            p={4}
+            cursor="pointer"
+            borderRadius="10px"
+            borderWidth="1px"
+            mb="2"
+            _hover={{
+              border:`1px solid ${color}`,
+              transform: "scale(0.98)",
+            }}
+            transition="all 0.2s" >
+            <Center>
+              <Image boxSize="50px" src={props.svg} alt={props.title} />
+            </Center>
+            <Text mt="2" fontWeight="light" textAlign="center">
+              {props.title}
+            </Text>
+          </Box>
+        </CustomLink>
+      </Tap>
+    </>
   );
 };