Added toggles to checkbox type

Gryt-chat · Jul 12, 2023 · a9d1579 · a9d1579 · vercel · Jul 12, 2023
1 parent 97d1fca
commit a9d1579
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 34 deletions.
diff --git a/dev/src/app/components/inputs/page.tsx b/dev/src/app/components/inputs/page.tsx
@@ -6,14 +6,37 @@ export default function buttons() {
   return (
     <React.Fragment>
       <Section header='Checkbox'>
-        <Checkbox isAnimated />
-        <Checkbox isAnimated type='checkbox-primary' />
-        <Checkbox isAnimated type='checkbox-success' />
+        <Checkbox checkboxAnimated />
+        <Checkbox
+          checkboxAnimated
+          inputSize='checkbox-sm'
+          inputType='checkbox-primary'
+        />
+        <Checkbox
+          checkboxAnimated
+          inputSize='checkbox-xs'
+          inputType='checkbox-success'
+        />
       </Section>
 
       <Section header='Checkbox with label'>
-        <Checkbox isAnimated>Remember me</Checkbox>
-        <Checkbox isAnimated>I agree</Checkbox>
+        <Checkbox checkboxAnimated>Remember me</Checkbox>
+        <Checkbox checkboxAnimated inputSize='checkbox-xs'>
+          I agree
+        </Checkbox>
+      </Section>
+
+      <Section header='Toggle'>
+        <Checkbox isToggle />
+        <Checkbox isToggle inputSize='toggle-sm' inputType='toggle-primary' />
+        <Checkbox isToggle inputSize='toggle-xs' inputType='toggle-success' />
+      </Section>
+
+      <Section header='Toggle with label'>
+        <Checkbox isToggle>Remember me</Checkbox>
+        <Checkbox isToggle inputSize='toggle-xs'>
+          I agree
+        </Checkbox>
       </Section>
     </React.Fragment>
   )

diff --git a/dev/src/components/checkbox/Checkbox.tsx b/dev/src/components/checkbox/Checkbox.tsx
@@ -9,55 +9,64 @@ type checkboxType =
   | 'checkbox-error'
   | 'checkbox-info'
 
+type toggleType =
+  | 'toggle-primary'
+  | 'toggle-secondary'
+  | 'toggle-accent'
+  | 'toggle-success'
+  | 'toggle-warning'
+  | 'toggle-error'
+  | 'toggle-info'
+
 type checkboxSize =
   | 'checkbox-xs'
   | 'checkbox-sm'
   | 'checkbox-md'
   | 'checkbox-lg'
 
-type checkboxParameters = {
+type toggleSize = 'toggle-xs' | 'toggle-sm' | 'toggle-md' | 'toggle-lg'
+
+interface checkboxParameters
+  extends React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
   children?: React.ReactNode
   checkboxRight?: boolean
   className?: string
-  isAnimated?: boolean
-  type?: checkboxType
-  size?: checkboxSize
+  checkboxAnimated?: boolean
+  inputType?: checkboxType | toggleType
+  inputSize?: checkboxSize | toggleSize
+  isToggle?: boolean
 }
 
 export function Checkbox({
   children,
   checkboxRight,
   className,
-  isAnimated,
-  type,
-  size
+  checkboxAnimated,
+  inputType,
+  inputSize,
+  isToggle,
+  ...rest
 }: checkboxParameters) {
+  const chckBox = (
+    <input
+      type='checkbox'
+      className={`${isToggle ? 'toggle' : 'checkbox'}${
+        checkboxAnimated ? ' interactive' : ''
+      } ${inputType} ${inputSize} ${className}`}
+      {...rest}
+    />
+  )
+
   return children ? (
     <label className='label cursor-pointer flex gap-2'>
-      {!checkboxRight && (
-        <input
-          type='checkbox'
-          className={`checkbox${
-            isAnimated ? ' interactive' : ''
-          } ${type} ${size} ${className}`}
-        />
-      )}
+      {!checkboxRight && chckBox}
       <span className='label-text'>{children}</span>
-      {checkboxRight && (
-        <input
-          type='checkbox'
-          className={`checkbox${
-            isAnimated ? ' interactive' : ''
-          } ${type} ${size} ${className}`}
-        />
-      )}
+      {checkboxRight && chckBox}
     </label>
   ) : (
-    <input
-      type='checkbox'
-      className={`checkbox${
-        isAnimated ? ' interactive' : ''
-      } ${type} ${size} ${className}`}
-    />
+    chckBox
   )
 }