Merge pull request #30 from ZunwDev/development

feature(switch) added custom switch component with 2 variants

dashboard/src/components/Other/Toggle.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+export type ToggleVariant = 'rounded' | 'square';
+
+export const ToggleVariants: ToggleVariant[] = ['rounded', 'square'];
+
+interface ToggleProps extends React.HTMLAttributes<HTMLLabelElement> {
+  variant?: ToggleVariant;
+  disabled?: boolean;
+}
+
+const Toggle: React.FC<ToggleProps> = ({
+  variant = 'rounded',
+  disabled = false,
+  className = '',
+  children,
+  ...other
+}) => {
+  const variantClass = {
+    rounded: 'rounded-full',
+    square: 'rounded-none'
+  }[variant];
+
+  const disabledClass = disabled
+    ? 'cursor-not-allowed pointer-events-none opacity-75'
+    : '';
+  const baseToggleClass = `w-11 h-6 bg-transparent peer-focus:outline-none ${variantClass} peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-ctp-text after:h-5 after:w-5 after:transition-all peer-checked:bg-ctp-crust`;
+  const sliderClass = `after:${variantClass} ${className} ${baseToggleClass}`;
+
+  return (
+    <label
+      className={`relative inline-flex items-center cursor-pointer border border-ctp-text ${variantClass} ${disabledClass}`}
+      {...other}
+    >
+      <input
+        type="checkbox"
+        value=""
+        className={`sr-only peer ${disabledClass}`}
+      ></input>
+      <div className={`${disabledClass} ${sliderClass}`}></div>
+      {children}
+    </label>
+  );
+};
+
+export default Toggle;

dashboard/src/pages/dev/index.tsx

@@ -14,6 +14,7 @@ import Text from '~/components/Text/Text';
 import Description from '~/components/Text/Description';
 import InfoTooltip from '~/components/Other/InfoTooltip';
 import Link from '~/components/Text/Link';
+import Toggle from '~/components/Other/Toggle';
 
 const Dev: NextPage = () => {
   const cardClass = 'gap-4 border border-ctp-text p-6 rounded-lg';
@@ -219,6 +220,26 @@ const Dev: NextPage = () => {
             </Flex>
           </Flex>
         </Flex>
+        {/* Toggles */}
+        <Flex
+          justifyContent="center"
+          alignItems="stretch"
+          flexDirection="col"
+          className={cardClass}
+        >
+          <Subtitle className="">Toggles</Subtitle>
+          <Flex
+            justifyContent="start"
+            alignItems="start"
+            flexDirection="row"
+            className="gap-4"
+          >
+            <Toggle></Toggle>
+            <Toggle disabled={true}></Toggle>
+            <Toggle variant="square"></Toggle>
+            <Toggle variant="square" disabled={true}></Toggle>
+          </Flex>
+        </Flex>
       </Flex>
     </div>
   );