App/my-app/src/Components/previewHeader/index.jsx

import { Typography, useTheme } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";

export default function PreviewHeader({ chunks, tokens }) {
  const theme = useTheme();
  return (
    <>
      <Grid
        container
        border={1}
        borderColor={theme.palette.border.default}
        borderRadius={2}
        mb={2}
        padding={1.2}
        sx={{
          backgroundColor: theme.palette.background.default,
        }}
      >
        <Grid
          item
          sm={5}
          ml={1}
          p={1.2}
          border={1}
          borderColor={theme.palette.border.default}
          borderRadius={2}
          alignContent={"center"}
          textAlign={"center"}
          sx={{
            backgroundColor: "white",
          }}
        >
          <Typography variant="h5">
            Nº chunks: <br /> {chunks}{" "}
          </Typography>
        </Grid>
        <Grid
          item
          ml={10}
          sm={5}
          p={1.2}
          border={1}
          borderColor={theme.palette.border.default}
          borderRadius={2}
          alignContent={"center"}
          textAlign={"center"}
          sx={{
            backgroundColor: "white",
          }}
        >
          <Typography variant="h5">
            Nº tokens: <br /> {chunks}{" "}
          </Typography>
        </Grid>
      </Grid>
    </>
  );
}