70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import { Box, IconButton, Typography, useTheme } from "@mui/material";
|
|
import { FC } from "react";
|
|
import Trash from "@icons/trash";
|
|
|
|
type AnswerItemProps = {
|
|
fieldName: string;
|
|
fieldValue: string;
|
|
deleteHC: () => void;
|
|
};
|
|
|
|
export const AnswerItem: FC<AnswerItemProps> = ({ fieldName, fieldValue, deleteHC }) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<Box
|
|
sx={{
|
|
padding: "10px 20px",
|
|
height: "140px",
|
|
borderBottom: `1px solid ${theme.palette.background.default}`,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexDirection: "column",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
overflow: "hidden",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Typography
|
|
sx={{
|
|
fontSize: "14px",
|
|
fontWeight: 500,
|
|
color: theme.palette.grey3.main,
|
|
textOverflow: "ellipsis",
|
|
overflow: "hidden",
|
|
width: "100%",
|
|
whiteSpace: "nowrap",
|
|
}}
|
|
>
|
|
{fieldName}
|
|
</Typography>
|
|
|
|
<Typography
|
|
sx={{
|
|
fontSize: "14px",
|
|
fontWeight: 400,
|
|
color: theme.palette.grey3.main,
|
|
textOverflow: "ellipsis",
|
|
overflow: "hidden",
|
|
width: "100%",
|
|
whiteSpace: "nowrap",
|
|
}}
|
|
>
|
|
{fieldValue}
|
|
</Typography>
|
|
</Box>
|
|
<IconButton
|
|
sx={{
|
|
m: "auto",
|
|
}}
|
|
onClick={deleteHC}
|
|
>
|
|
<Trash />
|
|
</IconButton>
|
|
</Box>
|
|
);
|
|
};
|