From 01b50f5e0a38409596390ce8278fa9c7e33dcc73 Mon Sep 17 00:00:00 2001
From: Zunw <43964753+ZunwDev@users.noreply.github.com>
Date: Fri, 23 Jun 2023 21:20:32 +0200
Subject: [PATCH] feature(switch) added custom switch component with 2 variants

---
 dashboard/src/components/Other/Toggle.tsx | 46 +++++++++++++++++++++++
 dashboard/src/pages/dev/index.tsx         | 21 +++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 dashboard/src/components/Other/Toggle.tsx

diff --git a/dashboard/src/components/Other/Toggle.tsx b/dashboard/src/components/Other/Toggle.tsx
new file mode 100644
index 0000000..e1ee8e2
--- /dev/null
+++ b/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;
diff --git a/dashboard/src/pages/dev/index.tsx b/dashboard/src/pages/dev/index.tsx
index 9191eaa..70f8a52 100644
--- a/dashboard/src/pages/dev/index.tsx
+++ b/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>
   );