-
-
Notifications
You must be signed in to change notification settings - Fork 18
/
App.tsx
111 lines (106 loc) · 2.71 KB
/
App.tsx
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
107
108
109
110
111
import {
Checkbox,
CheckboxIndicator,
CheckboxLabel,
CheckboxDescription,
} from 'solid-headless';
import {
createSignal,
JSX,
Switch,
Match,
} from 'solid-js';
function CheckIcon(props: JSX.IntrinsicElements['svg']): JSX.Element {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
{...props}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
);
}
function CloseIcon(props: JSX.IntrinsicElements['svg']): JSX.Element {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
{...props}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
);
}
function UndefinedIcon(props: JSX.IntrinsicElements['svg']): JSX.Element {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
{...props}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20 12H4"
/>
</svg>
);
}
export default function App(): JSX.Element {
const [checked, setChecked] = createSignal<boolean>();
return (
<div class="fixed inset-0 flex items-center justify-center">
<Checkbox
checked={checked()}
onChange={setChecked}
as="div"
class="flex flex-row justify-between items-center space-x-4"
>
<CheckboxIndicator
class="flex-none w-6 h-6 p-1 text-white bg-opacity-25 bg-fuchsia-900 rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
>
<Switch>
<Match when={checked() === undefined}>
<span class="sr-only">Mixed</span>
<UndefinedIcon />
</Match>
<Match when={checked() === true}>
<span class="sr-only">Checked</span>
<CheckIcon />
</Match>
<Match when={checked() === false}>
<span class="sr-only">Unchecked</span>
<CloseIcon />
</Match>
</Switch>
</CheckboxIndicator>
<div class="flex-1 flex flex-col text-white">
<CheckboxLabel class="font-bold">
This is a checkbox label
</CheckboxLabel>
<CheckboxDescription class="font-semibold text-xs opacity-50">
This is a checkbox description
</CheckboxDescription>
</div>
</Checkbox>
</div>
);
}