Spaces:
Running
Running
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> | |
</> | |
); | |
} | |