150 lines
4.8 KiB
TypeScript
150 lines
4.8 KiB
TypeScript
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import CustomAccordion from "@components/CustomAccordion";
|
||
import { cardShadow } from "@root/utils/themes/shadow";
|
||
|
||
export type History = {
|
||
title: string;
|
||
date: string;
|
||
info: string;
|
||
description: string;
|
||
payMethod?: string;
|
||
expired?: boolean;
|
||
};
|
||
|
||
interface AccordionWrapperProps {
|
||
content: History[];
|
||
}
|
||
|
||
export default function AccordionWrapper({ content }: AccordionWrapperProps) {
|
||
const theme = useTheme();
|
||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||
const isTablet = useMediaQuery(theme.breakpoints.down(900));
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(560));
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
overflow: "hidden",
|
||
borderRadius: "12px",
|
||
boxShadow: cardShadow,
|
||
}}
|
||
>
|
||
{content.map((accordionItem, index) => (
|
||
<CustomAccordion
|
||
key={index}
|
||
divide
|
||
text={accordionItem.description}
|
||
header={
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
height: upMd ? "72px" : undefined,
|
||
padding: "20px 20px 20px 0",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
cursor: "pointer",
|
||
userSelect: "none",
|
||
gap: "20px",
|
||
alignItems: upSm ? "center" : undefined,
|
||
flexDirection: upSm ? undefined : "column",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: upSm ? "center" : undefined,
|
||
justifyContent: "space-between",
|
||
flexDirection: upSm ? undefined : "column",
|
||
gap: upMd ? "40px" : "10px",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
width: "110px",
|
||
fontSize: upMd ? "20px" : "18px",
|
||
lineHeight: upMd ? undefined : "19px",
|
||
fontWeight: 500,
|
||
color: accordionItem.expired
|
||
? theme.palette.text.disabled
|
||
: theme.palette.text.secondary,
|
||
px: 0,
|
||
}}
|
||
>
|
||
{accordionItem.date}
|
||
</Typography>
|
||
|
||
<Typography
|
||
sx={{
|
||
fontSize: upMd ? "18px" : "16px",
|
||
lineHeight: upMd ? undefined : "19px",
|
||
fontWeight: 500,
|
||
color: accordionItem.expired
|
||
? theme.palette.text.disabled
|
||
: theme.palette.grey3.main,
|
||
px: 0,
|
||
}}
|
||
>
|
||
{accordionItem.title}
|
||
</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
flexFlow: "1",
|
||
flexBasis: "60%",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
display: upMd ? undefined : "none",
|
||
fontSize: upMd ? "18px" : "16px",
|
||
lineHeight: upMd ? undefined : "19px",
|
||
fontWeight: 400,
|
||
color: accordionItem.expired
|
||
? theme.palette.text.disabled
|
||
: theme.palette.grey3.main,
|
||
px: 0,
|
||
}}
|
||
>
|
||
{accordionItem.payMethod && (
|
||
<Typography>
|
||
Способ оплаты: {accordionItem.payMethod}
|
||
</Typography>
|
||
)}
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
height: "100%",
|
||
alignItems: "center",
|
||
gap: upSm ? "111px" : "17px",
|
||
width: "100%",
|
||
maxWidth: isTablet ? null : "160px",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
marginLeft: isTablet ? (isMobile ? null : "auto") : null,
|
||
color: accordionItem.expired
|
||
? theme.palette.text.disabled
|
||
: theme.palette.grey3.main,
|
||
fontSize: upSm ? "20px" : "16px",
|
||
fontWeight: 500,
|
||
textAlign: "left",
|
||
}}
|
||
>
|
||
{accordionItem.info}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
}
|
||
/>
|
||
))}
|
||
</Box>
|
||
);
|
||
}
|