49 lines
2.3 KiB
TypeScript
49 lines
2.3 KiB
TypeScript
import { auditoryGet, AuditoryResponse, AuditoryItem } from "@/api/auditory";
|
||
import ArrowDownIcon from "@/assets/icons/ArrowDownIcon";
|
||
import { useCurrentQuiz } from "@/stores/quizes/hooks";
|
||
import { useDomainDefine } from "@/utils/hooks/useDomainDefine";
|
||
import { Box, Collapse, IconButton, List, Typography, useTheme } from "@mui/material";
|
||
import { useEffect, useState } from "react";
|
||
import { AuditoryLink } from "./AuditoryLink";
|
||
|
||
export const AuditoryList = ({utmParams, auditory, onDelete}:{utmParams:string,auditory:AuditoryItem[], onDelete: (id: number) => void}) => {
|
||
const theme = useTheme();
|
||
const { isTestServer } = useDomainDefine();
|
||
const [linksOpen, setLinksOpen] = useState(true);
|
||
|
||
console.log("auditory-___---_auditory__---__-__auditory_------__---__-__---_------__---__-__---_------__---__-____--__")
|
||
console.log(auditory)
|
||
|
||
return (
|
||
<>
|
||
<Box sx={{
|
||
maxWidth: "796px",
|
||
bgcolor: "#fff",
|
||
borderRadius: "12px",
|
||
p: "20px",
|
||
boxShadow: "0px 4px 32px 0px #7E2AEA14",
|
||
mt: "24px"
|
||
}}>
|
||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
<Typography sx={{ fontSize: "18px", fontWeight: 500, color: theme.palette.grey3.main }}>
|
||
Ваши сохраненные ссылки
|
||
</Typography>
|
||
<IconButton
|
||
sx={{ cursor: 'pointer', color: theme.palette.brightPurple.main, display: 'flex', alignItems: 'center', transition: 'transform 0.2s', transform: linksOpen ? 'rotate(0deg)' : 'rotate(180deg)' }}
|
||
onClick={() => setLinksOpen((prev) => !prev)}
|
||
size="large"
|
||
>
|
||
<ArrowDownIcon style={{ width: "18px", height: "18px" }} />
|
||
</IconButton>
|
||
</Box>
|
||
<Collapse in={linksOpen} timeout="auto" unmountOnExit sx={{ mt: "3px" }}>
|
||
<List sx={{ gap: '8px', p: 0, m: 0 }}>
|
||
{auditory.map((item, idx) => (
|
||
<AuditoryLink utmParams={utmParams} key={idx} item={item} index={idx} onDelete={onDelete} />
|
||
))}
|
||
</List>
|
||
</Collapse>
|
||
</Box>
|
||
</>
|
||
);
|
||
}; |