mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-05-08 06:37:26 -05:00
30 lines
562 B
TypeScript
30 lines
562 B
TypeScript
import { Switch } from "@headlessui/react";
|
|
import clsx from "clsx";
|
|
|
|
export function Toggle({
|
|
checked,
|
|
setChecked,
|
|
tiny,
|
|
id,
|
|
name,
|
|
}: {
|
|
checked: boolean;
|
|
setChecked: (checked: boolean) => void;
|
|
tiny?: boolean;
|
|
id?: string;
|
|
name?: string;
|
|
}) {
|
|
return (
|
|
<Switch
|
|
checked={checked}
|
|
onChange={setChecked}
|
|
className={clsx("toggle", { checked, tiny })}
|
|
id={id}
|
|
name={name}
|
|
data-testid={id ? `toggle-${id}` : null}
|
|
>
|
|
<span className={clsx("toggle-dot", { checked, tiny })} />
|
|
</Switch>
|
|
);
|
|
}
|