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 62 63 64 65 66 67 68 69 70 71 | 29x 4x 4x 4x 29x 37x 4x 29x | import { Box, Stack } from "@mui/material";
import { styled, useAppTheme } from "@theme/v2/Provider";
import { SelectorOption } from "@pages/ManageMoney/Modal/filter.types";
import { XIcon } from "@phosphor-icons/react";
import GiveTruncateText from "@shared/Text/GiveTruncateText";
import { AvatarShapes } from "@shared/Avatar/GiveAvatar.types";
import GiveThumbnail from "@shared/Thumbnail/GiveThumbnail";
type Props = {
item: SelectorOption;
onClick: () => void;
isFirst?: boolean;
iconShape?: AvatarShapes;
hideAvatar?: boolean;
};
const SelectedMerchantCard = ({
item,
onClick,
isFirst,
iconShape,
hideAvatar = false,
}: Props) => {
const { palette } = useAppTheme();
const hideThumbnail = item.hideImage || hideAvatar;
return (
<StyledContainer isFirst={isFirst}>
<StyledTitleStack>
{!hideThumbnail && (
<GiveThumbnail
imageUrl={item?.icon}
shouldBeRounded={iconShape === "rounded"}
size="extra_extra_small"
type={item?.iconType || "avatar"}
/>
)}
<GiveTruncateText lineClamp={1} variant="bodyXS">
{item.label}
</GiveTruncateText>
</StyledTitleStack>
<XIcon
onClick={onClick}
size={16}
color={palette.text.primary}
cursor="pointer"
/>
</StyledContainer>
);
};
export default SelectedMerchantCard;
const StyledContainer = styled(Box, {
shouldForwardProp: (prop) => prop !== "isFirst",
})<{ isFirst?: boolean }>(({ theme, isFirst }) => ({
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "8px",
borderRadius: "8px",
backgroundColor: theme.palette.primitive?.transparent["darken-5"],
marginTop: isFirst ? "16px" : "8px",
}));
const StyledTitleStack = styled(Stack)({
display: "flex",
flexDirection: "row",
gap: "8px",
alignItems: "center",
});
|