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 | 12x 12x 12x 12x | import { Box, SxProps } from "@mui/material";
import { AccordionSummary, Accordion, AccordionDetails } from "@mui/material";
import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
import { useCart } from "@sections/PayBuilder/provider/CartContext";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
import { styled } from "@theme/v2/Provider";
import { useRef, useState } from "react";
export const MobileOrderAcordion = ({
children,
sx,
}: {
children: React.ReactNode;
sx?: SxProps;
}) => {
const { totalAmount } = useCart();
const [expanded, setExpanded] = useState(false);
const title = expanded ? "Hide Order" : "View Order";
const Caret = useRef(CaretDownIcon);
const { palette } = useAppTheme();
return (
<CustomAcordionRoot
elevation={0}
onChange={(event, expanded) => {
if (expanded) {
setExpanded(expanded);
Caret.current = CaretUpIcon;
} else {
setExpanded(expanded);
Caret.current = CaretDownIcon;
}
}}
sx={sx}
>
<AccordionSummary
aria-controls="panel1-content"
id="panel1-header"
sx={{
alignItems: "center",
borderRadius: expanded ? "12px 12px 0 0" : "12px",
backgroundColor: palette.primitive?.transparent["darken-5"],
}}
>
<Box
sx={{
width: "50%",
display: "flex",
alignItems: "center",
gap: "10px",
}}
>
<GiveText>{title}</GiveText>
<Caret.current size={20} />
</Box>
<GiveText sx={{ width: "33%", marginLeft: "auto", textAlign: "right" }}>
{totalAmount} USD
</GiveText>
</AccordionSummary>
<CustomAcordionDetails expanded={expanded}>
{children}
</CustomAcordionDetails>
</CustomAcordionRoot>
);
};
const CustomAcordionRoot = styled(Accordion)(({ theme }) => ({
backgroundColor: theme.palette.primitive?.transparent["darken-5"],
width: "100%",
margin: "20px auto",
borderRadius: "12px",
"&.Mui-expanded": {
margin: "auto",
borderRadius: "12px",
},
"&.MuiAccordion-root:first-of-type": {
borderRadius: "12px",
marginBottom: "20px",
},
"&.MuiAccordion-root:before": {
display: "none",
},
}));
const CustomAcordionDetails = styled(AccordionDetails, {
shouldForwardProp: (prop) => prop !== "expanded",
})<{ expanded?: boolean }>(({ expanded, theme }) => ({
display: "flex",
justifyContent: "center",
paddingLeft: 0,
paddingRight: 0,
backgroundColor: theme.palette.primitive?.transparent?.["darken-5"],
borderRadius: expanded ? "0 0 12px 12px" : "12px",
}));
|