1
0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00
Files
checktheroads-hyperglass/hyperglass/ui/components/card/header.tsx
2021-01-03 23:51:09 -07:00

23 lines
556 B
TypeScript

import { Flex, Text } from '@chakra-ui/react';
import { useColorValue } from '~/context';
import type { TCardHeader } from './types';
export const CardHeader: React.FC<TCardHeader> = (props: TCardHeader) => {
const { children, ...rest } = props;
const bg = useColorValue('blackAlpha.50', 'whiteAlpha.100');
return (
<Flex
p={4}
bg={bg}
direction="column"
roundedTopLeft={4}
roundedTopRight={4}
borderBottomWidth="1px"
{...rest}
>
<Text fontWeight="bold">{children}</Text>
</Flex>
);
};