Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 19x 19x 4x 19x 19x 4x 2x 19x | import { useState } from "react";
import {
Accordion,
AccordionDetails,
AccordionSummary,
Box,
Stack,
} from "@mui/material";
import GiveDivider from "@shared/GiveDivider/GiveDivider";
import GiveText from "@shared/Text/GiveText";
import { CaretDownIcon, PencilSimpleIcon } from "@phosphor-icons/react";
import { AccordionItemData, AccordionSectionProps } from "../types";
import { CustomGrid } from "./Sections";
import GiveButton from "@shared/Button/GiveButton";
import { styled } from "@theme/v2/Provider";
function AccordionSection<T extends AccordionItemData>({
items,
getFieldsList,
statusComponent,
onEdit,
extraContent,
}: AccordionSectionProps<T>) {
const [expandedAccordion, setExpandedAccordion] = useState<
string | number | null
>(null);
const handleAccordionChange = (itemId: string | number) => {
setExpandedAccordion(expandedAccordion === itemId ? null : itemId);
};
return (
<>
{items.map((item, index, array) => (
<div key={item.id}>
<Accordion
expanded={expandedAccordion === item.id}
onChange={() => handleAccordionChange(item.id)}
sx={{
boxShadow: "none",
"&:before": { display: "none" },
borderBottomLeftRadius: "20px !important",
borderBottomRightRadius: "20px !important",
}}
>
<StyledAccordionSummary expandIcon={<CaretDownIcon size="20px" />}>
<Stack
justifyContent="space-between"
flexDirection="row"
alignItems="center"
width="100%"
data-testid="bank-expand-accordion-button"
>
<Box>
<GiveText mb="4px" fontSize="16px">
{item.title}
</GiveText>
<GiveText fontSize="14px" color="secondary">
{item.subtitle}
</GiveText>
</Box>
{statusComponent(item)}
</Stack>
</StyledAccordionSummary>
<AccordionDetails sx={{ padding: "20px", paddingTop: 0 }}>
<Box display="flex" flexDirection="column" gap="16px">
{extraContent && extraContent(item)}
<CustomGrid data={item} itemsList={getFieldsList(item)} />
<GiveButton
sx={{ width: "100%", border: "none" }}
onClick={(e) => onEdit(e, item)}
label="Edit"
endIcon={<PencilSimpleIcon size={20} />}
variant="filled"
color="light"
size="small"
data-testid="bank-edit-button"
/>
</Box>
</AccordionDetails>
</Accordion>
{index !== array.length - 1 && <GiveDivider />}
</div>
))}
</>
);
}
const StyledAccordionSummary = styled(AccordionSummary)(() => ({
borderRadius: "20px",
padding: "20px",
margin: "0",
"& .MuiAccordionSummary-content": {
margin: "0",
},
"& .MuiAccordionSummary-content.Mui-expanded": {
margin: "0",
padding: "0",
},
}));
export default AccordionSection;
|