62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { Box, Typography, useTheme } from "@mui/material";
|
|
import { FC } from "react";
|
|
import { IconBtnAdd } from "./IconBtnAdd/IconBtnAdd";
|
|
import { AnswerItem } from "./AnswerItem/AnswerItem";
|
|
import { TagKeys, TitleKeys, TQuestionEntity, TTags } from "../../AmoCRMModal";
|
|
|
|
type ItemProps = {
|
|
title: TitleKeys | TagKeys;
|
|
onAddBtnClick: () => void;
|
|
data: TQuestionEntity | TTags;
|
|
};
|
|
export const Item: FC<ItemProps> = ({ title, onAddBtnClick, data, tagsNamesList }) => {
|
|
const theme = useTheme();
|
|
|
|
const titleDictionary = {
|
|
Company: "Компания",
|
|
Lead: "Сделка",
|
|
Contact: "Контакты",
|
|
Customer: "Покупатели",
|
|
};
|
|
|
|
const translatedTitle = titleDictionary[title];
|
|
const selectedOptions = data[title];
|
|
return (
|
|
<Box
|
|
sx={{
|
|
width: "172px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
borderRight: `1px solid ${theme.palette.background.default}`,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
alignSelf: "center",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderRadius: "12px",
|
|
backgroundColor: theme.palette.background.default,
|
|
width: "156px",
|
|
height: "40px",
|
|
}}
|
|
>
|
|
<Typography sx={{ fontSize: "16px", fontWeight: 500 }}>
|
|
{translatedTitle}
|
|
</Typography>
|
|
</Box>
|
|
{selectedOptions &&
|
|
selectedOptions.map((text, index) => (
|
|
<AnswerItem
|
|
key={text + index}
|
|
fieldValue={"Значение поля"}
|
|
fieldName={tagsNamesList?.[title][index] || text}
|
|
/>
|
|
))}
|
|
|
|
<IconBtnAdd onAddBtnClick={onAddBtnClick} />
|
|
</Box>
|
|
);
|
|
};
|