feat(backoffice): slicing backoffice dimentorin - setting page

libs/ui/src/atoms/index.ts

@@ -1,4 +1,5 @@
 export * from './button';
 export * from './input';
 export * from './textarea';
-export * from './select'
+export * from './select'
+export * from './toggle';

libs/ui/src/atoms/toggle/index.ts

@@ -0,0 +1 @@
+export * from './toggle'

libs/ui/src/atoms/toggle/toggle.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@imphnen-frontend-service/utils";
+import { DetailedHTMLProps, FC, HTMLAttributes } from "react";
+
+export type ToggleInputProps = DetailedHTMLProps<
+  HTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+> & {
+  label?: string
+  labelClassName?: string
+}
+
+export const ToggleInput: FC<ToggleInputProps> = ({ label, className, labelClassName, ...rest }) => {
+  return (
+    <label className={cn("flex items-center gap-5 cursor-pointer mb-8", className)}>
+      <span className={cn("text-p3 text-gray-800 font-medium", labelClassName)}>{label}</span>
+      <input type="checkbox" className="sr-only peer" {...rest} />
+      <div
+        className={cn(
+          "w-14 h-7 bg-gray-300 rounded-3xl relative transition-colors",
+          "peer-checked:bg-blue-600 peer-focus:outline peer-focus:outline-blue-500 peer-checked:[&>div]:translate-x-6.5",
+        )}
+      >
+        <div className="absolute left-0.5 top-0.5 h-6 w-6 bg-white rounded-full shadow transition-transform peer-checked:translate-x-6.5" />
+      </div>
+    </label>
+  );
+}

libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx

@@ -4,6 +4,8 @@ import {
   InboxOutlined,
   LogoutOutlined,
   ReloadOutlined,
+  ScheduleOutlined,
+  SettingOutlined,
   UsergroupAddOutlined,
   UserOutlined,
   UserSwitchOutlined,
@@ -23,7 +25,8 @@ const MENUS = [
   { label: 'Validasi Transaksi', href: '/transactions', icon: <AuditOutlined className="text-[20px]" /> },
   { label: 'Data Pengiriman Hadiah', href: '/prizes', icon: <InboxOutlined className="text-[20px]" /> },
   { label: 'User - Dimentorin', href: '/users-dimentorin', icon: <UserSwitchOutlined className="text-[20px]" /> },
-  { label: 'Session - Dimentorin', href: '/session-dimentorin', icon: <UserSwitchOutlined className="text-[20px]" /> },
+  { label: 'Session - Dimentorin', href: '/session-dimentorin', icon: <ScheduleOutlined className="text-[20px]" /> },
+  { label: 'Settings - Dimentorin', href: '/settings-dimentorin', icon: <SettingOutlined className="text-[20px]" /> },
 ]
 
 export const BackofficeSidebar: FC = (): ReactElement => {