Current breakpoint HUD component

CurrentBreakpointDisplay.tsx

// Obviously, don't ship this to production. I have this behind an environment flag in _app.tsx, like so:
/*
    import dynamic from "next/dynamic";

    let DynamicCurrentBreakpointDisplay;
    if (process.env.NODE_ENV === "development") {
      DynamicCurrentBreakpointDisplay = dynamic(() =>
        import("../../app/core/components/CurrentBreakpointDisplay").then(
          (m) => m.CurrentBreakpointDisplay
        )
      );
    } else {
      DynamicCurrentBreakpointDisplay = () => <></>;
    }

    return (
      {/* _app.tsx stuff */}
      <DynamicCurrentBreakpointDisplay />
    );
*/

import { Box, useMediaQuery, useTheme, Typography } from "@material-ui/core";

export const CurrentBreakpointDisplay = () => {
  const theme = useTheme();
  const isXs = useMediaQuery(theme.breakpoints.only("xs"));
  const isSm = useMediaQuery(theme.breakpoints.only("sm"));
  const isMd = useMediaQuery(theme.breakpoints.only("md"));
  const isLg = useMediaQuery(theme.breakpoints.only("lg"));
  const isXl = useMediaQuery(theme.breakpoints.only("xl"));

  return (
    <Box
      sx={{
        position: "fixed",
        bottom: 3,
        left: 3,
        backgroundColor: "black",
        color: "white",
      }}
    >
      {isXs && <Typography>XS</Typography>}
      {isSm && <Typography>SM</Typography>}
      {isMd && <Typography>MD</Typography>}
      {isLg && <Typography>LG</Typography>}
      {isXl && <Typography>XL</Typography>}
    </Box>
  );
};