chore: Update package.json version to 1.0.193 and Switch component st…

…yles
Programmer-Network · Jul 20, 2024 · 9a67a9b · 9a67a9b
1 parent 8f0eedb
commit 9a67a9b
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.192",
+  "version": "1.0.193",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

diff --git a/src/Components/Inputs/Switch/Switch.stories.tsx b/src/Components/Inputs/Switch/Switch.stories.tsx
@@ -6,16 +6,26 @@ export default {
   title: "Input / Switch"
 };
 
-export const Default = () => {
-  const [isChecked, setIsChecked] = useState(false);
+export const IsChecked = () => {
+  return (
+    <Switch
+      name='isEnabled'
+      label='Lorem ipsum'
+      isChecked={true}
+      onChange={({ isEnabled }) => console.log(isEnabled)}
+    />
+  );
+};
 
-  console.log("🚀 ─── Default ─── isChecked:", isChecked);
+export const IsNotChecked = () => {
+  const [isChecked, setIsChecked] = useState(false);
 
   return (
     <Switch
+      name='isEnabled'
+      label='Lorem ipsum'
       isChecked={isChecked}
       onChange={({ isEnabled }) => setIsChecked(isEnabled)}
-      name='isEnabled'
     />
   );
 };
diff --git a/src/Components/Inputs/Switch/index.tsx b/src/Components/Inputs/Switch/index.tsx
@@ -7,33 +7,44 @@ const Switch: React.FC<ISwitchProps> = ({
   name,
   isChecked,
   onChange,
-  label = "Toggle me",
+  label,
   className
 }) => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onChange({ [name]: event.target.checked });
   };
-
   return (
-    <label
-      className={classNames(
-        "yl-inline-flex yl-cursor-pointer yl-items-center",
-        className
-      )}
-    >
-      <input
-        type='checkbox'
-        checked={isChecked}
-        onChange={handleChange}
-        className='peer sr-only yl-hidden'
-      />
-      <div className="peer yl-relative yl-h-6 yl-w-12 yl-rounded-full yl-bg-primary-text-color after:yl-absolute after:yl-start-[2px] after:yl-top-[2px] after:yl-h-5 after:yl-w-5 after:yl-rounded-full after:yl-bg-primary-background-color after:yl-transition-all after:yl-content-[''] peer-checked:yl-bg-primary peer-checked:after:yl-translate-x-full rtl:peer-checked:after:-yl-translate-x-full" />
-      {label && (
-        <span className='yl-ms-3 yl-text-sm yl-font-medium yl-text-primary-text-color'>
-          {label}
-        </span>
-      )}
-    </label>
+    <>
+      <label className='yl-flex yl-cursor-pointer yl-select-none yl-items-center'>
+        <div className={classNames("yl-relative", className)}>
+          <input
+            type='checkbox'
+            checked={isChecked}
+            onChange={handleChange}
+            className='yl-sr-only'
+          />
+          <div
+            className={classNames("yl-block yl-h-8 yl-w-14 yl-rounded-full", {
+              "yl-bg-primary": isChecked,
+              "yl-bg-primary-text-color": !isChecked
+            })}
+          ></div>
+          <div
+            className={classNames(
+              "yl-dot yl-absolute yl-left-1 yl-top-1 yl-h-6 yl-w-6 yl-rounded-full yl-transition yl-bg-primary-background-color",
+              {
+                "yl-translate-x-6": isChecked
+              }
+            )}
+          ></div>
+        </div>
+        {label && (
+          <span className='yl-ms-3 yl-text-sm yl-font-medium yl-text-primary-text-color'>
+            {label}
+          </span>
+        )}
+      </label>
+    </>
   );
 };