nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
collections
/
components
/
collectionSelectorItem
/
CollectionSelectorItem.tsx
1.6 kB
60 lines
1import {
2 CheckboxCard,
3 CheckboxIndicator,
4 Group,
5 Text,
6 Tooltip,
7} from '@mantine/core';
8import classes from './CollectionSelectorItem.module.css';
9
10interface Props {
11 value: string;
12 name: string;
13 checked: boolean;
14 cardCount: number;
15 onChange: (checked: boolean, item: SelectableCollectionItem) => void;
16 disabled?: boolean;
17}
18
19export default function CollectionSelectorItem(props: Props) {
20 return (
21 <Tooltip
22 label="Card is already in this collection"
23 disabled={!props.disabled}
24 >
25 <CheckboxCard
26 bg={props.disabled ? 'gray.3' : undefined}
27 c={props.disabled ? 'gray' : undefined}
28 disabled={props.disabled}
29 radius={'lg'}
30 p={'sm'}
31 className={classes.root}
32 value={props.value}
33 checked={props.checked}
34 onChange={(checked) =>
35 props.onChange(checked, {
36 id: props.value,
37 name: props.name,
38 cardCount: props.cardCount,
39 })
40 }
41 >
42 <Group justify="space-between" wrap="nowrap">
43 <Group gap={'xs'} wrap="nowrap">
44 <Text fw={500} lineClamp={1} flex={1}>
45 {props.name}
46 </Text>
47 <Text c={'gray'}>·</Text>
48 <Text c={'gray'}>
49 {props.cardCount} {props.cardCount === 1 ? 'card' : 'cards'}
50 </Text>
51 </Group>
52 <CheckboxIndicator
53 disabled={props.disabled}
54 checked={props.disabled || props.checked}
55 />
56 </Group>
57 </CheckboxCard>
58 </Tooltip>
59 );
60}