36 lines
853 B
TypeScript
36 lines
853 B
TypeScript
|
import { Flex, VStack } from '@chakra-ui/layout'
|
||
|
|
import { IconProps, Text } from '@chakra-ui/react'
|
||
|
|
import React from 'react'
|
||
|
|
|
||
|
|
type FeatureCardProps = {
|
||
|
|
Icon: (props: IconProps) => JSX.Element
|
||
|
|
title: string
|
||
|
|
content: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export const FeatureCard = ({ Icon, title, content }: FeatureCardProps) => {
|
||
|
|
return (
|
||
|
|
<VStack p="6" bgColor="gray.100" pos="relative" rounded="lg" spacing="4">
|
||
|
|
<Flex
|
||
|
|
boxSize="50px"
|
||
|
|
bgColor="blue.500"
|
||
|
|
rounded="lg"
|
||
|
|
color="white"
|
||
|
|
justify="center"
|
||
|
|
align="center"
|
||
|
|
pos="absolute"
|
||
|
|
top="-25px"
|
||
|
|
shadow="lg"
|
||
|
|
>
|
||
|
|
<Icon boxSize="25px" />
|
||
|
|
</Flex>
|
||
|
|
<Text textAlign="center" fontWeight="semibold">
|
||
|
|
{title}
|
||
|
|
</Text>
|
||
|
|
<Text textAlign="center" color="gray.500">
|
||
|
|
{content}
|
||
|
|
</Text>
|
||
|
|
</VStack>
|
||
|
|
)
|
||
|
|
}
|