Header.jsx
Published: 2023-12-06 16:38:30

```
import React from "react";
import { Box } from "@mui/material";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import { useTheme } from '@mui/material/styles';

const Header = ({ isDatetimeActive,setIsDatetimeActive }) => {
    const theme = useTheme();
    const onDatetimeClickHandler = (e) => {
        setIsDatetimeActive(true);
    };
    const onEpochClickHandler = (e) => {
        setIsDatetimeActive(false);
    };

    let temp=true
    return (
        <Box
            sx={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                mb: "10px",
                width: "100%",
            }}
        >
            <Stack
                spacing={2}
                direction="row"
                sx={{
                    width: "13%",
                    backgroundColor: "#ebd0f2",
                    borderRadius: "30px",
                    mt: "40px",
                    display: "block",
                    display: "flex",
                    justifyContent: "space-evenly",
                    px: "3px",
                    py: "5px",
                    [theme.breakpoints.between('lg',"xl")]: {
                        width:"20%",
                        px:"8px"
                    },
                    [theme.breakpoints.between('md',"lg")]: {
                        width:"25%",
                        px:"8px"
                    },
                    [theme.breakpoints.down('md')]: {
                        width:"30%",
                        px:"8px"
                     },
                     [theme.breakpoints.down('sm')]: {
                        width:"55%",
                        px:"8px"
                     }

                }}
            >
                <Button
                    variant="text"
                    onClick={onEpochClickHandler}
                    sx={{
                        my: "10px",
                        borderRadius: "30px",
                        backgroundColor: isDatetimeActive ? "#ebd0f2" : "#9333ea",
                        py: "15px",
                        px: "25px",
                    }}
                >
                    <Typography
                        component="div"
                        color={isDatetimeActive ? "black" : "white"}
                        sx={{fontSize:"20px",fontWeight:600,
                        fontFamily:"Arial",
                        [theme.breakpoints.down('md')]:{
                            fontSize:"15px",
                            fontWeight:400,
                            // backgroundColor: isDatetimeActive ? "#ebd0f2" : "#9333ea",
                         }}}
                        
                    >
                        Epoch
                    </Typography>
                </Button>
                <Button
                    variant="text"
                    onClick={onDatetimeClickHandler}
                    sx={{
                        my: "10px",
                        borderRadius: "30px",
                        backgroundColor: isDatetimeActive ? "#9333ea" : "#ebd0f2",
                        py: "15px",
                        px: "25px",
                    }}
                >
                    <Typography
                        component="div"
                        color={isDatetimeActive ? "white" : "black"}
                        sx={{fontSize:"20px",fontWeight:600,fontFamily:"Arial",
                        [theme.breakpoints.down('md')]:{
                            fontSize:"15px",
                            fontWeight:400,
                         }}}
                    >
                        DateTime
                    </Typography>
                </Button>
            </Stack>
            {/* <div>{isDatetimeActive?"datetime":"epochtime"}</div> */}
        </Box>
    );
};

export default Header;

```