Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 4x 4x 12x 12x | import { CloseIcon } from "@assets/icons";
import { Text } from "@common/Text";
import { Stack } from "@mui/material";
import { styled } from "@mui/material";
import { Image } from "@common/StyledImage/Image";
import Placeholder from "assets/images/Placeholder.png";
import { palette } from "@palette";
import { SelectorOption } from "./SelectorOption";
import React from "react";
export default function ListItem({
item,
onDelete,
noImage,
customPlaceholder,
}: {
item: SelectorOption;
onDelete: (val: SelectorOption) => void;
noImage?: boolean;
customPlaceholder?: React.ReactElement;
}) {
const isCustomPlaceholder = Boolean(customPlaceholder && !item.imageURL);
return (
<ListContainer direction="row">
{isCustomPlaceholder && customPlaceholder}
{!noImage && !isCustomPlaceholder && (
<Image
width={24}
height={24}
src={item.imageURL ? `${item.imageURL}/thumb` : Placeholder}
sx={{ borderRadius: "1.34px" }}
/>
)}
<ListLabel>{item.label}</ListLabel>
<CloseIcon
onClick={() => onDelete(item)}
stroke={palette.info.hard}
width={18}
height={18}
/>
</ListContainer>
);
}
const ListContainer = styled(Stack)(() => ({
gap: "8px",
padding: "4px 8px",
backgroundColor: palette.info.light,
borderRadius: "4px",
alignItems: "center",
":hover": {
cursor: "pointer",
},
}));
const ListLabel = styled(Text)(() => ({
fontSize: "12px",
color: palette.info.main,
flex: 1,
}));
|