✨ toggle

src/front/Components/DesignSystem/Dropdown/index.tsx

@@ -53,7 +53,7 @@ export default function Dropdown(props: IProps) {
 						disabled && classes["disabled"],
 						!!selectedOption && classes["active"],
 					])}
-					onClick={openable.toggle}>
+					onClick={() => openable.toggle()}>
 					<div className={classes["content"]}>
 						{getLabelContent(selectedOption, placeholder)}
 						<ChevronDownIcon />

src/front/Components/DesignSystem/Toggle/classes.module.scss

@@ -0,0 +1,46 @@
+@import "@Themes/constants.scss";
+
+.root {
+	cursor: pointer;
+	height: fit-content;
+
+	display: flex;
+	width: 48px;
+	padding: var(--Radius-xs, 2px);
+	gap: 8px;
+
+	border-radius: var(--toggle-radius, 360px);
+	background: var(--toggle-off-background, #edeff1);
+
+	.circle {
+		width: 20px;
+		height: 20px;
+		flex-shrink: 0;
+
+		border-radius: var(--toggle-radius, 360px);
+		background: var(--toggle-switch-background, #fff);
+
+		transition: transform 0.3s ease-in-out;
+
+		&.active {
+			transform: translateX(24px);
+		}
+	}
+
+	&.sm {
+		width: 40px;
+
+		.circle {
+			width: 16px;
+			height: 16px;
+
+			&.active {
+				transform: translateX(20px);
+			}
+		}
+	}
+
+	&.active {
+		background-color: var(--toggle-on-background, #005bcb);
+	}
+}

src/front/Components/DesignSystem/Toggle/index.tsx

@@ -0,0 +1,38 @@
+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>
+	);
+}

src/front/Components/Layouts/DesignSystem/classes.module.scss

@@ -15,6 +15,7 @@
 
 		.rows {
 			display: flex;
+			align-items: center;
 			gap: 16px;
 		}
 	}

src/front/Components/Layouts/DesignSystem/index.tsx

@@ -35,6 +35,7 @@ import { useCallback, useMemo, useState } from "react";
 import classes from "./classes.module.scss";
 import CheckboxesInputElement from "@Front/Components/DesignSystem/CheckBox";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import Toggle, { EToggleSize } from "@Front/Components/DesignSystem/Toggle";
 
 export default function DesignSystem() {
 	const { isOpen, open, close } = useOpenable();
@@ -87,6 +88,15 @@ export default function DesignSystem() {
 			<div className={classes["root"]}>
 				<div />
 				<div className={classes["components"]}>
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Toggle</Typography>
+					<div className={classes["rows"]}>
+						<Toggle size={EToggleSize.MD} />
+						<Toggle size={EToggleSize.MD} defaultActive />
+					</div>
+					<div className={classes["rows"]}>
+						<Toggle size={EToggleSize.SM} />
+						<Toggle size={EToggleSize.SM} defaultActive />
+					</div>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Autocomplete Multi Select</Typography>
 
 					<AutocompleteMultiSelect

src/front/Hooks/useToggle.ts

@@ -3,8 +3,11 @@ import { useCallback, useState } from "react";
 export default function useToggle(defaultValue: boolean = false) {
 	const [active, setActive] = useState(defaultValue);
 
-	const toggle = useCallback(() => {
-		setActive((prev) => !prev);
+	const toggle = useCallback((callback?: (isOpen: boolean) => void) => {
+		setActive((prev) => {
+			callback?.(!prev);
+			return !prev;
+		});
 	}, []);
 
 	const activate = useCallback(() => {