1
 2
 3import { Box, ChakraProps, Text } from '@chakra-ui/react'
 4import { FC } from 'react'
 5
 6type CalloutProps = {
 7    header: string,
 8    body: string,
 9};
10
11export const Callout: FC<CalloutProps & ChakraProps> = ({ header, body, ...props }) => {
12  return (
13    <Box bg="gray.50" _dark={{ bg: 'gray.700' }} borderRadius="10" borderColor="red.500" border="2px" p="4" {...props}>
14      <Text fontSize="xl" fontWeight="bold">
15        {header}
16      </Text>
17      {body}
18    </Box>
19  )
20}