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