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>
+    </>
   );
 };
 

src/layout/header/categories.tsx

@@ -4,6 +4,7 @@ import { getCategorySvgs } from "@/services";
 import CustomLink from "@/common/link";
 import { Box, useColorModeValue } from "@chakra-ui/react";
 import { RaceBy } from "@uiball/loaders";
+import Tap from "@/animations/tap";
 
 const Categories = () => {
   const { data, error } = useSWR(getCategorySvgs);
@@ -15,8 +16,8 @@ const Categories = () => {
   return (
     <>
       {data.map((category: string) => (
+      <Tap key={category}>
         <CustomLink 
-          key={category}
           href={`/category/${category}`}>
           <Box
             p={4}
@@ -26,9 +27,10 @@ const Categories = () => {
               border:`1px solid ${color}`,
               transform: "scale(0.98)",
             }}>
-          {category}
+            {category}
           </Box>
         </CustomLink>
+      </Tap>
       ))}
     </>
   );

src/pages/_app.tsx

@@ -33,6 +33,7 @@ function MyApp({ Component, pageProps, router }: AppProps) {
         stopDelayMs={200}
         height={2}
         showOnShallow={true}
+        options={{ showSpinner: false }}
       />
       <ChakraProvider theme={theme}>
         <SWRConfig value={{ fetcher }}>