svgl/components/card/index.js
2022-02-18 17:19:05 +00:00

32 lines
720 B
JavaScript

import React from "react";
import Link from "next/link";
import { Box, Text, Icon, Image, Center } from "@chakra-ui/react";
import Hover from "animations/hover";
const Index = ({ title, url, href }) => {
return (
<Link href={url} passHref>
<Box
_hover={{
shadow: "md",
transform: "translateY(-4px)",
transition: "all .3s",
}}
p={4}
cursor="pointer"
borderRadius="10px"
mb="3"
>
<Center>
<Image src={href} alt={title} boxSize="60px" />
</Center>
<Text mt="2" fontWeight="light" textAlign={"center"}>
{title}
</Text>
</Box>
</Link>
);
};
export default Index;