import { Box, Grid, IconButton, Typography } from "@material-ui/core"; import { styled } from "@material-ui/styles"; import React, { useState } from "react"; import { ReactComponent as WarningIcon } from "assets/logos/warning.svg"; import CloseIcon from "@material-ui/icons/Close"; import hexToRgba from "hex-to-rgba"; const Container = styled(Box)({ position: "fixed", width: "100%", minHeight: 92, bottom: 0, background: hexToRgba("#746438", 0.95), boxSizing: "border-box", padding: "25px 50px", color: "#FFC839", zIndex: 10000, }); const ContainerText = styled(Typography)({ maxWidth: 1160, fontWeight: 400, color: "inherit", fontSize: "18px", ["@media (max-width:1030px)"]: { fontSize: "16px", }, }); export const WarningFooter: React.FC<{ text: string }> = ({ text }) => { const [open, setOpen] = useState(true); return ( <> {open && ( <Container> <Grid container alignItems="center" justify="space-between" wrap="nowrap" > <Grid item> <WarningIcon fill="#FFC839" /> </Grid> <Grid item style={{marginRight: "10px"}}> </Grid> <Grid item> <ContainerText align="center"> {text} </ContainerText> </Grid> <Grid item> <IconButton onClick={() => setOpen(false)}> <CloseIcon htmlColor="#FFC839" /> </IconButton> </Grid> </Grid> </Container> )} </> ); };