import React, {useState} from 'react' import {Box, BoxProps, HStack, Stack, Text} from '@chakra-ui/react' import {CloseButton} from './CloseButton' interface GradientBannerProps extends BoxProps { actionButton?: JSX.Element bannerContent: JSX.Element bannerBgColor?: string } function Banner(props: GradientBannerProps) { const {actionButton, bannerContent, bgColor, ...rest} = props const [isHidden, setIsHidden] = useState(false) return ( <Box display={isHidden ? 'none' : 'block'} pos="fixed" bottom="0" left="0" width="full" as="section" {...rest}> <Box zIndex="9999" bg={bgColor || 'blue.600'} color="white" py="5" px={{base: '3', md: '6', lg: '8'}} > <HStack spacing="3"> <Stack direction={{base: 'column', sm: 'row'}} justifyContent="center" alignItems="center" spacing={{base: '3', md: '6'}} width="full" > <Text fontSize="3xl"> <b>FC: </b> {bannerContent} </Text> {actionButton} </Stack> <CloseButton onClick={() => setIsHidden(true)} alignSelf={{base: 'self-start', sm: 'initial'}} aria-label="Close banner"/> </HStack> </Box> </Box> ) } export default Banner