73 lines
3.0 KiB
JavaScript
73 lines
3.0 KiB
JavaScript
import {
|
|
Accordion,
|
|
AccordionDetails,
|
|
AccordionSummary,
|
|
Box,
|
|
Typography,
|
|
Grid, ButtonGroup, Button, CircularProgress
|
|
} from "@mui/material";
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
import VerifiedIcon from '@mui/icons-material/Verified';
|
|
import Check from "@mui/icons-material/Check";
|
|
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
|
|
import VisibilityRoundedIcon from "@mui/icons-material/VisibilityRounded";
|
|
import {useTranslations} from "next-intl";
|
|
import {useState} from "react";
|
|
|
|
const CustomAccordion = ({ title,
|
|
hasOpened,
|
|
hasAccordionOpened,
|
|
handleAccordionChange,
|
|
accordionIndex,
|
|
handleSizeChange }) => {
|
|
const t = useTranslations();
|
|
const [downloadStatus, setDownloadStatus] = useState('initial');
|
|
const handleDownloadClick = (setStatus) => {
|
|
|
|
console.log(setStatus)
|
|
setStatus('downloading');
|
|
setTimeout(() => {
|
|
setStatus('completed');
|
|
setTimeout(() => {
|
|
setStatus('initial');
|
|
}, 2500);
|
|
}, 2000);
|
|
// Perform the actual download logic here
|
|
};
|
|
return(
|
|
<Accordion elevation={0} expanded={hasOpened || false} onChange={() => handleAccordionChange(accordionIndex)} sx={{
|
|
mb: 2,
|
|
boxShadow: 1,
|
|
backgroundColor: "#f7f7f7"
|
|
}}>
|
|
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
|
<Box sx={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
|
|
<Typography sx={{ fontWeight: 500, color: "primary.main" }}>{title}</Typography>
|
|
{hasAccordionOpened && <VerifiedIcon style={{ color: "green" }} />}
|
|
</Box>
|
|
</Box>
|
|
</AccordionSummary>
|
|
<AccordionDetails sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
|
|
<Grid container direction="column" alignItems="center">
|
|
<Grid item>
|
|
<ButtonGroup variant="contained" aria-label="outlined primary button group">
|
|
<Button onClick={() => handleDownloadClick(setDownloadStatus)}>
|
|
{downloadStatus === 'completed' ? (
|
|
<Check sx={{ color: 'white' }} fontSize="small" />
|
|
) : downloadStatus === 'downloading' ? (
|
|
<CircularProgress sx={{ color: 'white' }} size={18} />
|
|
) : (
|
|
<FileDownloadOutlinedIcon sx={{ color: 'white' }} fontSize="small" />
|
|
)}
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Grid>
|
|
</Grid>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
);
|
|
}
|
|
|
|
export default CustomAccordion;
|