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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 102x 102x 102x | import GiveText from "@shared/Text/GiveText";
import { optionType } from "../Headings/types";
import { ListItem } from "./ListItem";
import { fontSizeSingleType } from "../FontSize/const";
import { styled } from "@theme/v2/Provider";
export const MenuItems = ({
activeIndex,
options,
handleMenuItemClick,
flexDirection,
isColorOptions,
}: {
activeIndex: number;
options: optionType[];
handleMenuItemClick: (option: optionType) => void;
flexDirection?: "row" | "column";
isColorOptions?: boolean;
}) => {
return (
<Container flexDirection={flexDirection} isColorOptions={isColorOptions}>
{options?.map((option, index) => {
// "pSmall" is a custom block style, not an HTML tag — preview it as a paragraph.
const Tag = option?.value === "pSmall" ? "p" : option?.value;
return (
<ListItem
key={option?.value}
isSelected={index === activeIndex}
option={option}
handleMenuItemClick={handleMenuItemClick}
menuItemSx={isColorOptions ? { padding: 0 } : {}}
listItemContent={(option: optionType | fontSizeSingleType) => {
if (option?.id === "font") {
return (
<GiveText fontFamily={option?.label}>
{option?.label}
</GiveText>
);
}
if (option?.id === "fontSize") {
return <GiveText>{option?.label}</GiveText>;
}
if (option?.id === "color") {
return (
<Color style={{ background: option?.value, padding: 0 }} />
);
}
return (
<Tag
style={{
margin: 0,
marginLeft: "12px",
marginRight: "12px",
fontWeight: 400,
}}
>
{option?.label}
</Tag>
);
}}
/>
);
})}
</Container>
);
};
const Color = styled("div")(({ theme }) => {
return {
width: "32px",
height: "32px",
border: `2px solid ${theme.palette.border?.secondary}`,
borderRadius: "5px",
[theme.breakpoints.down("v2_sm")]: {
minWidth: "56px",
height: "56px",
},
};
});
const Container = styled("div")<{
flexDirection?: "row" | "column";
isColorOptions?: boolean;
}>(({ theme, flexDirection, isColorOptions }) => {
if (flexDirection === "row") {
return {
width: "fit-content",
display: "grid",
gridTemplateColumns: `repeat(auto-fill, minmax(${
isColorOptions ? "32px" : "75px"
}, 1fr))`,
[theme.breakpoints.down("v2_sm")]: {
gridTemplateColumns: `repeat(auto-fill, minmax(${
isColorOptions ? "56px" : "75px"
}, 1fr))`,
},
gap: "8px",
padding: "8px",
margin: "0 auto",
maxWidth: "100%",
};
}
return {};
});
|