qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-06 06:58:04 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

⚒️ Clear svgCard.

Browse Source
This commit is contained in:
pheralb 2022-07-24 23:40:18 +01:00
parent ed1468a24e
commit 2cd7c66462
1 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/svgCard.tsx
View File

@ -1,35 +1,44 @@
import React from "react"; import React from "react";
import { SVGCardProps } from "@/interfaces/components"; 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 Tap from "@/animations/tap";
import CustomLink from "@/common/link"; 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 (
<Tap> <>
<CustomLink href={`/svg/${props.id}`}> <Tap>
<Box <CustomLink href={`/svg/${props.id}`}>
bg={bg} <Box
p={4} bg={bg}
cursor="pointer" p={4}
borderRadius="10px" cursor="pointer"
borderWidth="1px" borderRadius="10px"
mb="2" borderWidth="1px"
_hover={{ mb="2"
shadow: "md", _hover={{
}} shadow: "md",
transition="all 0.2s" }}
> transition="all 0.2s"
<Center> >
<Image boxSize="50px" src={props.svg} alt={props.title} /> <Center>
</Center> <Image boxSize="50px" src={props.svg} alt={props.title} />
<Text mt="2" fontWeight="light" textAlign="center"> </Center>
{props.title} <Text mt="2" fontWeight="light" textAlign="center">
</Text> {props.title}
</Box> </Text>
</CustomLink> </Box>
</Tap> </CustomLink>
</Tap>
</>
); );
}; };