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

import { Button, Typography, useTheme } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";
import CloseIcon from "@mui/icons-material/Close";

export default function DocumentComponent({
  documentName,
  documentId,
  documentNumber,
  deleteDocument,
}) {
  const theme = useTheme();

  return (
    <>
      <Grid
        item
        container
        alignItems={"center"}
        xs={12}
        mb={1}
        sx={{
          backgroundColor: theme.palette.secondary.main,
          padding: "8px 12px",
          borderRadius: "10px",
          border: "1px solid",
          borderColor: theme.palette.border.default,
        }}
      >
        <Grid
          item
          container
          borderRadius={20}
          justifyContent={"center"}
          alignContent={"center"}
          border={1}
          sx={{
            backgroundColor: theme.palette.secondary.main,
            width: 35,
            height: 35,
          }}
        >
          <Typography variant="h5">{documentNumber}</Typography>
        </Grid>
        <Grid
          container
          alignItems={"center"}
          justifyContent="space-between"
          sx={{ flexGrow: 1, marginLeft: 1 }}
        >
          <Grid item container direction="column" ml={1}>
            <Grid item>
              <Typography
                variant="h5"
                sx={{
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                }}
              >
                {documentName.substring(0, 8)}
              </Typography>
            </Grid>
            <Grid item>
              <Typography variant="h7" color={theme.palette.border.default}>
                {documentId}
              </Typography>
            </Grid>
          </Grid>
          <Grid item>
            <Button
              onClick={() => deleteDocument(documentName)}
              sx={{
                minWidth: "auto",
                padding: 0,
                margin: 0,
              }}
            >
              <CloseIcon fontSize="small" sx={{ color: "black" }} />
            </Button>
          </Grid>
        </Grid>
      </Grid>
    </>
  );
}