From c2fb743ed12592601de17ce03fb75b6cfab3c1e2 Mon Sep 17 00:00:00 2001
From: Eric Doughty-Papassideris <edoughtypapassideris@linagora.com>
Date: Sun, 21 Apr 2024 22:10:39 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20front:=20adding=20slider=20like?=
 =?UTF-8?q?=20checkbox=20(#50)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/atoms/input/input-checkbox-slider.tsx   | 17 +++++++++++++++++
 .../atoms/input/stories/checkbox.stories.tsx    | 10 ++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 tdrive/frontend/src/app/atoms/input/input-checkbox-slider.tsx

diff --git a/tdrive/frontend/src/app/atoms/input/input-checkbox-slider.tsx b/tdrive/frontend/src/app/atoms/input/input-checkbox-slider.tsx
new file mode 100644
index 00000000..8a18fd13
--- /dev/null
+++ b/tdrive/frontend/src/app/atoms/input/input-checkbox-slider.tsx
@@ -0,0 +1,17 @@
+interface CheckboxSliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  checked?: boolean;
+  disabled?: boolean;
+}
+/** Just classes up a checkbox to look like a slider. Deviates from onChange etc for
+ * compatibility with `InputHTMLAttributes<HTMLInputElement>`, to expose eg. id to use with htmlFor.
+ */
+export const CheckboxSlider = (props: CheckboxSliderProps) =>
+  <input
+    {...props}
+    type="checkbox"
+    role="switch"
+    // @author https://tw-elements.com/docs/react/forms/switch/
+    className="!bg-none mr-2 mt-[0.3rem] h-7 w-14 appearance-none rounded-[0.9rem] bg-neutral-300 before:pointer-events-none before:absolute before:h-7 before:w-5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:mt-[0.2rem] after:ml-[0.2rem] after:h-5 after:w-5 after:rounded-full after:border-none after:bg-neutral-100 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-primary checked:after:absolute checked:after:z-[2] checked:after:ml-[1.9625rem] checked:after:w-5 checked:after:rounded-full checked:after:border-none checked:after:bg-primary checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer dark:bg-neutral-600 dark:after:bg-white dark:checked:bg-primary dark:checked:after:bg-primary disabled:cursor-default disabled:opacity-25 !focus:shadow-none"
+    checked={!!props.checked}
+    disabled={props.disabled}
+    />;
diff --git a/tdrive/frontend/src/app/atoms/input/stories/checkbox.stories.tsx b/tdrive/frontend/src/app/atoms/input/stories/checkbox.stories.tsx
index 36f624dc..262f8435 100644
--- a/tdrive/frontend/src/app/atoms/input/stories/checkbox.stories.tsx
+++ b/tdrive/frontend/src/app/atoms/input/stories/checkbox.stories.tsx
@@ -2,6 +2,8 @@
 import { ComponentStory } from '@storybook/react';
 import { useState } from 'react';
 import { Checkbox } from '../input-checkbox';
+import { CheckboxSlider } from '../input-checkbox-slider';
+import { Title } from 'app/atoms/text';
 
 export default {
   title: '@atoms/checkbox',
@@ -30,6 +32,14 @@ const Template: ComponentStory<any> = (props: { label: string; disabled: boolean
         disabled={props.disabled}
         label={props.label}
       />
+
+      <Title className='my-5'>CheckboxSlider</Title>
+
+      <CheckboxSlider
+        onClick={e => setChecked(!checked)}
+        checked={checked}
+        disabled={props.disabled}
+        />
     </div>
   );
 };