89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
import { AuditoryItem } from "@/api/auditory";
|
|
import CopyIcon from "@/assets/icons/CopyIcon";
|
|
import Trash from "@/assets/icons/trash";
|
|
import { InfoPopover } from "@/ui_kit/InfoPopover";
|
|
import TooltipClickInfo from "@/ui_kit/Toolbars/TooltipClickInfo";
|
|
import { useDomainDefine } from "@/utils/hooks/useDomainDefine";
|
|
import { IconButton, ListItem, Typography, useTheme } from "@mui/material";
|
|
|
|
interface AuditoryLinkProps {
|
|
item: AuditoryItem;
|
|
index: number;
|
|
onDelete: (id: number) => void;
|
|
utmParams: string
|
|
}
|
|
|
|
export const AuditoryLink = ({ utmParams, item, index, onDelete }: AuditoryLinkProps) => {
|
|
const theme = useTheme();
|
|
const { isTestServer } = useDomainDefine();
|
|
|
|
const handleCopy = (text: string) => {
|
|
navigator.clipboard.writeText(text);
|
|
};
|
|
|
|
const handleDelete = () => {
|
|
onDelete(item.id);
|
|
};
|
|
|
|
const linkText = `${isTestServer ? "https://s.hbpn.link/" : "https://hbpn.link/"}?_paud=${item.id}${utmParams}`;
|
|
|
|
return (
|
|
<ListItem
|
|
key={index}
|
|
disablePadding
|
|
sx={{
|
|
bgcolor: "#F2F3F7",
|
|
borderRadius: "10px",
|
|
p: "13px 14px 13px 20px",
|
|
mb: "8px",
|
|
maxWidth: "756px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
transition: 'background 0.2s, border 0.2s',
|
|
'& .MuiListItemSecondaryAction-root': {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '12px',
|
|
width: "70px",
|
|
justifyContent: "space-between",
|
|
},
|
|
}}
|
|
secondaryAction={
|
|
<>
|
|
<IconButton
|
|
edge="end"
|
|
aria-label="delete"
|
|
sx={{ color: theme.palette.brightPurple.main, p: 0, width: 18, height: 18 }}
|
|
onClick={handleDelete}
|
|
>
|
|
<Trash sx={{
|
|
"& path": {
|
|
stroke: theme.palette.brightPurple.main,
|
|
}
|
|
}} />
|
|
</IconButton>
|
|
<IconButton edge="end" aria-label="info" sx={{ color: theme.palette.brightPurple.main, p: 0, width: 18, height: 18 }}>
|
|
<TooltipClickInfo title={`Пол: ${item.sex ? "мужской" : "женский"} \n Возраст: ${item.age}`} />
|
|
</IconButton>
|
|
<IconButton
|
|
edge="end"
|
|
aria-label="copy"
|
|
sx={{ color: theme.palette.brightPurple.main, p: 0, width: 18, height: 18, marginRight: "-2px" }}
|
|
onClick={() => handleCopy(linkText)}
|
|
>
|
|
<CopyIcon color={theme.palette.brightPurple.main} />
|
|
</IconButton>
|
|
</>
|
|
}
|
|
>
|
|
<Typography sx={{
|
|
color: 'black', fontWeight: 400, fontSize: "16px",
|
|
textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden",
|
|
width: "calc(100% - 80px)"
|
|
|
|
}}>
|
|
{linkText}
|
|
</Typography>
|
|
</ListItem>
|
|
);
|
|
};
|