nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
collections
/
components
/
collectionSelectorItem
/
CollectionSelectorItem.tsx
1.7 kB
67 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
45 fw={500}
46 lineClamp={1}
47 flex={1}
48 style={{
49 wordBreak: 'break-all',
50 }}
51 >
52 {props.name}
53 </Text>
54 <Text c={'gray'}>·</Text>
55 <Text c={'gray'}>
56 {props.cardCount} {props.cardCount === 1 ? 'card' : 'cards'}
57 </Text>
58 </Group>
59 <CheckboxIndicator
60 disabled={props.disabled}
61 checked={props.disabled || props.checked}
62 />
63 </Group>
64 </CheckboxCard>
65 </Tooltip>
66 );
67}