feat(interface/menu): checkbox

feat(package/interface/menu): checkbox
feat(web/menu/list): checkbox
feat(web/menu/list): checkbox option for ListItem
feat(web/menu/list): custom checkbox
This commit is contained in:
BerkieBb
2022-10-29 12:23:15 +02:00
committed by Luke
parent de23227ea7
commit 5ba1a3b8f9
5 changed files with 125 additions and 30 deletions

View File

@@ -1,15 +1,17 @@
import { Box, Flex, Stack, Spacer, Text, IconProps } from '@chakra-ui/react';
import { Box, Flex, Stack, Text } from '@chakra-ui/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { forwardRef } from 'react';
import CustomCheckbox from './CustomCheckbox';
import type { MenuItem } from './index';
interface Props {
item: MenuItem;
index: number;
scrollIndex: number;
checked: boolean;
}
const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index, scrollIndex }, ref) => {
const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index, scrollIndex, checked }, ref) => {
return (
<Box
bg="#25262B"
@@ -53,6 +55,11 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
<FontAwesomeIcon icon="chevron-right" fontSize={16} color="#909296" />
</Stack>
</Flex>
) : item.checked !== undefined ? (
<Flex alignItems="center" justifyContent="space-between" w="100%">
<Text>{item.label}</Text>
<CustomCheckbox checked={checked}></CustomCheckbox>
</Flex>
) : (
<Text>{item.label}</Text>
)}