d85f9edac8
Prettier 3.0.0 comes with new standards so we need to upgrade our files to comply with it.
44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import React, { InputHTMLAttributes } from "react";
|
|
import classNames from "classnames";
|
|
import { Field, FieldProps } from ":/components/Forms/Field";
|
|
|
|
type Props = InputHTMLAttributes<HTMLInputElement> &
|
|
FieldProps & {
|
|
label?: string;
|
|
labelSide?: "left" | "right";
|
|
};
|
|
|
|
export const Switch = ({
|
|
label,
|
|
text,
|
|
state,
|
|
fullWidth,
|
|
labelSide = "left",
|
|
|
|
...props
|
|
}: Props) => {
|
|
return (
|
|
<label
|
|
className={classNames(
|
|
"c__checkbox",
|
|
"c__switch",
|
|
"c__switch--" + labelSide,
|
|
{
|
|
"c__checkbox--disabled": props.disabled,
|
|
"c__switch--full-width": fullWidth,
|
|
},
|
|
)}
|
|
>
|
|
<Field text={text} compact={true} state={state} fullWidth={fullWidth}>
|
|
<div className="c__checkbox__container">
|
|
{label && <div className="c__checkbox__label">{label}</div>}
|
|
<div className="c__switch__rail__wrapper">
|
|
<input type="checkbox" {...props} />
|
|
<div className="c__switch__rail" />
|
|
</div>
|
|
</div>
|
|
</Field>
|
|
</label>
|
|
);
|
|
};
|