fix(ProjectCard): Fix the footer height of the component

treely · Mar 14, 2024 · 8b21de5 · 8b21de5
1 parent d8aa9d7
commit 8b21de5
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/src/components/ProjectCard/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Divider, Heading, SimpleGrid, Text, useToken } from '@chakra-ui/react';
+import { Box, Divider, Flex, Heading, SimpleGrid, Text, useToken } from '@chakra-ui/react';
 import { css } from '@emotion/react';
 import { ArrowsOutSimple, MapPin } from '@phosphor-icons/react';
 import React, { ReactNode } from 'react';
@@ -26,7 +26,8 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
   const icons = [<ArrowsOutSimple color={gray500} />, <MapPin color={gray500} />];
 
   return (
-    <Box
+    <Flex
+      flexDir="column"
       height="full"
       position="relative"
       borderRadius="2xl"
@@ -50,7 +51,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
       >
         {image}
       </Box>
-      <Box padding="6">
+      <Box padding="6" marginY="auto">
         <Heading as="h6" size="sm">
           {title}
         </Heading>
@@ -74,6 +75,6 @@ export const ProjectCard: React.FC<ProjectCardProps> = ({
           {footerSubTitle}
         </Text>
       </Box>
-    </Box>
+    </Flex>
   );
 };