qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-11-10 14:46:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

⚒️ Fix grid & card info.

Browse Source
This commit is contained in:
pheralb 2022-06-24 13:31:15 +01:00
parent 5076881f71
commit 603d39f7b3
2 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/grid.tsx
View File

@ -4,7 +4,7 @@ import { SimpleGrid } from "@chakra-ui/react";
const Grid = (props: LayoutProps) => { const Grid = (props: LayoutProps) => {
return ( return (
<SimpleGrid minChildWidth="200px" spacing="30px" > <SimpleGrid minChildWidth="160px" spacing="30px" >
{props.children} {props.children}
</SimpleGrid> </SimpleGrid>
); );

32
src/components/svgCard.tsx
View File

@ -1,15 +1,35 @@
import React from "react"; import React from "react";
import { SVGCardProps } from "@/interfaces/components"; 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 SVGCard = (props: SVGCardProps) => {
const bg = useColorModeValue("bg.light", "bg.dark"); const bg = useColorModeValue("bg.light", "bg.dark");
return ( return (
<Box bg={bg} shadow="sm" maxW="50%" borderWidth="2px" borderRadius="10px" p="5"> <Tap>
<Flex direction="column" justifyContent="center" alignItems="center"> <CustomLink href={`/svg/${props.id}`}>
<Image boxSize="50px" src={props.svg} alt={props.title} /> <Box
</Flex> bg={bg}
</Box> 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>
); );
}; };