48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { Flex, VStack } from '@chakra-ui/layout'
|
|
import { IconProps, Text } from '@chakra-ui/react'
|
|
import React, { useState } from 'react'
|
|
|
|
type FeatureCardProps = {
|
|
Icon: (props: IconProps) => JSX.Element
|
|
title: string
|
|
content: string
|
|
}
|
|
|
|
export const FeatureCard = ({ Icon, title, content }: FeatureCardProps) => {
|
|
const [isHovered, setIsHovered] = useState(false)
|
|
|
|
return (
|
|
<VStack
|
|
p="6"
|
|
bgColor="gray.800"
|
|
pos="relative"
|
|
rounded="lg"
|
|
spacing="4"
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
>
|
|
<Flex
|
|
boxSize="50px"
|
|
bgColor="blue.500"
|
|
rounded="lg"
|
|
color="white"
|
|
justify="center"
|
|
align="center"
|
|
pos="absolute"
|
|
top="-25px"
|
|
shadow="lg"
|
|
transform={isHovered ? 'translateY(-5px)' : 'translateY(0px)'}
|
|
transition="transform 300ms ease-out"
|
|
>
|
|
<Icon boxSize="25px" />
|
|
</Flex>
|
|
<Text textAlign="center" fontWeight="semibold" fontSize="lg">
|
|
{title}
|
|
</Text>
|
|
<Text textAlign="center" color="gray.500">
|
|
{content}
|
|
</Text>
|
|
</VStack>
|
|
)
|
|
}
|