7bf4de5892
* feat: redesiged Live Collaboration dialog * fix: address lints * fix: inactive dialog dark mode improvements * fix: follow styleguide with event parameter, add FilledButton size prop * fix: change timer to be imperative * fix: add spacing after emoji * fix: remove unused useEffect * fix: change margin into whitespace * fix: add share button check back
39 lines
728 B
TypeScript
39 lines
728 B
TypeScript
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>
|
|
);
|
|
};
|