imperative-header-mui.tsx

export const Header = () => {
  const theme = useTheme();
  const useMobile = useMediaQuery(theme.breakpoints.down(“sm”));
  return (
    <Box
      sx={{
        display: “flex”,
        alignItems: “center”,
        justifyContent: “space-between”,
        backgroundColor: “#e3e3e3”,
        color: “#444444”,
        paddingLeft: useMobile ? 2 : 3,
        paddingTop: useMobile ? 2 : 3,
        paddingBottom: useMobile ? 2 : 3
      }}
    >
      <div>
        <Typography variant={useMobile ? “h6” : “h5”}>
          1276 Bouret Dr
        </Typography>
        <Typography variant={useMobile ? “h6” : “h5”}>
          San Jose, CA 95123
        </Typography>
      </div>
      <Box
        sx={{
          borderTopLeftRadius: useMobile ? “6px” : “12px”,
          borderBottomLeftRadius: useMobile ? “6px” : “12px”,
          backgroundColor: “#444444”,
          padding: useMobile ? 2 : 3,
          display: “flex”,
          flexDirection: “column”,
          alignItems: “center”,
          justifyContent: “center”
        }}
      >
        <Typography variant={useMobile ? “body1” : “h6″} color=”white”>
          <b>10</b>
        </Typography>
        <Typography variant=”caption” color=”#CCCCCC” textAlign=”center”>
          days to close
        </Typography>
      </Box>
    </Box>
  );
};