a tool for shared writing and social publishing
leaflet.pub
1import { theme } from "tailwind.config";
2
3export const Toggle = (props: {
4 toggle: boolean;
5 onToggle: () => void;
6 disabledColor1?: string;
7 disabledColor2?: string;
8 children: React.ReactNode;
9}) => {
10 return (
11 <button
12 type="button"
13 className="toggle flex gap-2 items-start justify-start text-left"
14 onClick={() => {
15 props.onToggle();
16 }}
17 >
18 <div className="h-6 flex place-items-center">
19 <div
20 className="selected-outline transparent-outline flex items-center h-[20px] w-6 rounded-md border-border"
21 style={{
22 border: props.toggle
23 ? "1px solid " + theme.colors["accent-2"]
24 : "1px solid " + props.disabledColor2 ||
25 theme.colors["border-light"],
26 justifyContent: props.toggle ? "flex-end" : "flex-start",
27 background: props.toggle
28 ? theme.colors["accent-1"]
29 : props.disabledColor1 || theme.colors["tertiary"],
30 }}
31 >
32 <div
33 className="h-[14px] w-[10px] m-0.5 rounded-[2px]"
34 style={{
35 background: props.toggle
36 ? theme.colors["accent-2"]
37 : props.disabledColor2 || theme.colors["border-light"],
38 }}
39 />
40 </div>
41 </div>
42 {props.children}
43 </button>
44 );
45};