aboutsummaryrefslogtreecommitdiffstats
path: root/packages/excalidraw/components/Switch.tsx
diff options
context:
space:
mode:
authorkj_sh6042026-03-15 16:19:35 -0400
committerkj_sh6042026-03-15 16:19:35 -0400
commit6ec259a0e71174651bae95d4628138bf6fd68742 (patch)
tree5e33c6a5ec091ecabfcb257fdc7b6a88ed8754ac /packages/excalidraw/components/Switch.tsx
parent16c8578b15c727f22921f8a80a56ee4d4e7f2272 (diff)
refactor: packages/
Diffstat (limited to 'packages/excalidraw/components/Switch.tsx')
-rw-r--r--packages/excalidraw/components/Switch.tsx38
1 files changed, 38 insertions, 0 deletions
diff --git a/packages/excalidraw/components/Switch.tsx b/packages/excalidraw/components/Switch.tsx
new file mode 100644
index 0000000..431c644
--- /dev/null
+++ b/packages/excalidraw/components/Switch.tsx
@@ -0,0 +1,38 @@
+import clsx from "clsx";
+
+import "./Switch.scss";
+
+export type SwitchProps = {
+ name: string;
+ checked: boolean;
+ title?: string;
+ onChange: (value: boolean) => void;
+ disabled?: boolean;
+};
+
+export const Switch = ({
+ title,
+ name,
+ checked,
+ onChange,
+ disabled = false,
+}: SwitchProps) => {
+ return (
+ <div className={clsx("Switch", { toggled: checked, disabled })}>
+ <input
+ name={name}
+ id={name}
+ title={title}
+ type="checkbox"
+ checked={checked}
+ disabled={disabled}
+ onChange={() => onChange(!checked)}
+ onKeyDown={(event) => {
+ if (event.key === " ") {
+ onChange(!checked);
+ }
+ }}
+ />
+ </div>
+ );
+};