import React from 'react' ; import PseudoBox , { PseudoBoxProps } from '@chakra-ui/core/dist/PseudoBox' ; import Flex , { FlexProps } from '@chakra-ui/core/dist/Flex' ; import Stack , { StackProps } from '@chakra-ui/core/dist/Stack' ; import { useColorMode } from '@chakra-ui/core/dist/ColorModeProvider' ; export const cardBackgroundColors = { light : 'white' , dark : 'gray.900' , } ; export const cardProps = { p : 4 , borderRadius : 4 , shadow : 'md' , } ; export interface CardProps extends PseudoBoxProps { } export const Card = ( { ... props } ) => { const { colorMode } = useColorMode ( ) ; return ( < PseudoBox { ... cardProps } bg = { cardBackgroundColors [ colorMode ] } { ... props } />); } ; export interface FlexCardProps extends FlexProps { } export const FlexCard = ( { ... props } ) => { const { colorMode } = useColorMode ( ) ; return < Flex { ... cardProps } bg = { cardBackgroundColors [ colorMode ] } { ... props } />; } ; export interface StackCardProps extends StackProps { } export const StackCard = ( { ... props } ) => { const { colorMode } = useColorMode ( ) ; return ( < Stack { ... cardProps } bg = { cardBackgroundColors [ colorMode ] } { ... props } />); } ;