39 lines
960 B
TypeScript
39 lines
960 B
TypeScript
import useToggle from "@Front/Hooks/useToggle";
|
|
import classNames from "classnames";
|
|
import React, { useCallback } from "react";
|
|
|
|
import classes from "./classes.module.scss";
|
|
|
|
export enum EToggleSize {
|
|
MD = "md",
|
|
SM = "sm",
|
|
}
|
|
|
|
export enum ETagVariant {
|
|
REGULAR = "regular",
|
|
SEMI_BOLD = "semi_bold",
|
|
}
|
|
|
|
type IProps = {
|
|
onChange?: (value: boolean) => void;
|
|
defaultActive?: boolean;
|
|
size?: EToggleSize;
|
|
className?: string;
|
|
};
|
|
|
|
export default function Toggle(props: IProps) {
|
|
const { className, defaultActive = false, size = EToggleSize.MD } = props;
|
|
|
|
const { active, toggle } = useToggle(defaultActive);
|
|
|
|
const handleToggle = useCallback(() => {
|
|
toggle((isOpen) => props.onChange?.(isOpen));
|
|
}, [toggle, props]);
|
|
|
|
return (
|
|
<div className={classNames(classes["root"], className, classes[size], active && classes["active"])} onClick={handleToggle}>
|
|
<div className={classNames([classes["circle"], active && classes["active"]])} />
|
|
</div>
|
|
);
|
|
}
|