From 603d39f7b3f0e84e23cd595f8c8b49d651e92849 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Fri, 24 Jun 2022 13:31:15 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9A=92=EF=B8=8F=20Fix=20grid=20&=20card=20in?=
 =?UTF-8?q?fo.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/grid.tsx        |  2 +-
 src/components/svgCard.tsx | 32 ++++++++++++++++++++++++++------
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/common/grid.tsx b/src/common/grid.tsx
index 271d384..33bf93a 100644
--- a/src/common/grid.tsx
+++ b/src/common/grid.tsx
@@ -4,7 +4,7 @@ import { SimpleGrid } from "@chakra-ui/react";
 
 const Grid = (props: LayoutProps) => {
   return (
-    <SimpleGrid minChildWidth="200px" spacing="30px" >
+    <SimpleGrid minChildWidth="160px" spacing="30px" >
       {props.children}
     </SimpleGrid>
   );
diff --git a/src/components/svgCard.tsx b/src/components/svgCard.tsx
index f356797..c948301 100644
--- a/src/components/svgCard.tsx
+++ b/src/components/svgCard.tsx
@@ -1,15 +1,35 @@
 import React from "react";
 import { SVGCardProps } from "@/interfaces/components";
-import { Box, Flex, Image, useColorModeValue } from "@chakra-ui/react";
+import { Box, Center, Image, Text, useColorModeValue } from "@chakra-ui/react";
+import Tap from "@/animations/tap";
+import CustomLink from "@/common/link";
 
 const SVGCard = (props: SVGCardProps) => {
   const bg = useColorModeValue("bg.light", "bg.dark");
   return (
-    <Box bg={bg} shadow="sm" maxW="50%" borderWidth="2px" borderRadius="10px" p="5">
-      <Flex direction="column" justifyContent="center" alignItems="center">
-        <Image boxSize="50px" src={props.svg} alt={props.title} />
-      </Flex>
-    </Box>
+    <Tap>
+      <CustomLink href={`/svg/${props.id}`}>
+        <Box
+          bg={bg}
+          p={4}
+          cursor="pointer"
+          borderRadius="10px"
+          borderWidth="1px"
+          mb="2"
+          _hover={{
+            shadow: "md",
+          }}
+          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>
   );
 };