feat(packages/ui): add switch

project-error · Dec 23, 2023 · 3203ed6 · 3203ed6
1 parent b592fcd
commit 3203ed6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 5 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -25,8 +25,10 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
+    "@radix-ui/react-switch": "^1.0.3",
     "class-variance-authority": "^0.4.0",
     "clsx": "^2.0.0",
+    "lucide-react": "^0.294.0",
     "tailwind-merge": "^1.10.0"
   }
 }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -3,4 +3,5 @@ import './styles.css'
 export * from './button/index';
 export * from './input/index';
 export * from './list/index'
+export * from './switch/index'
 export * from './utils';
diff --git a/packages/ui/src/list/index.tsx b/packages/ui/src/list/index.tsx
@@ -1,16 +1,19 @@
 import React from 'react';
 import { cn } from '../utils';
+import { Check } from 'lucide-react';
 
 export interface ListProps {
   children: React.ReactNode;
 }
 
-export interface ListItemProps {
+export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
   children?: React.ReactNode;
   primaryText?: React.ReactNode;
-  secondaryText?: React.ReactNode;
+  secondaryText?: React.ReactNode
   startElement?: React.ReactNode;
   endElement?: React.ReactNode;
+  button?: boolean;
+  selected?: boolean;
 }
 
 export const List: React.FC<ListProps> = ({ children }) => {
@@ -26,22 +29,27 @@ export const ListItem = ({
   secondaryText,
   startElement,
   endElement,
+  button = false,
+  selected = false,
+  onClick,
   children,
 }: ListItemProps) => {
   return (
-    <li className="dark:bg-neutral-900">
+    <li className="dark:bg-neutral-900" onClick={button ? onClick : undefined}>
       <div
         className={cn(
           'relative flex items-center space-x-3 px-2 py-5',
           'hover:bg-neutral-200 dark:bg-neutral-800 hover:dark:bg-neutral-800/50',
+          selected && 'bg-neutral-100 dark:bg-neutral-700',
+          button && 'cursor-pointer',
         )}
       >
         {children ? (
           <>{children}</>
         ) : (
           <>
-            {startElement && <div className="flex-shrink-0">{startElement}</div>}
-            <div className="min-w-0 flex-1">
+            {startElement && <div className="flex-shrink-0 text-white">{startElement}</div>}
+            <div className="min-w-0 flex-1"> 
               {primaryText && (
                 <p className="truncate text-sm font-medium text-neutral-900 dark:text-white">
                   {primaryText}
@@ -53,6 +61,11 @@ export const ListItem = ({
                 </p>
               )}
             </div>
+            {selected && (
+              <div className="absolute inset-y-0 right-0 flex items-center pr-4">
+                <Check />
+              </div>
+            )}
             {endElement && <div className="flex-shrink-0">{endElement}</div>}
           </>
         )}

diff --git a/packages/ui/src/switch/index.tsx b/packages/ui/src/switch/index.tsx
@@ -0,0 +1,23 @@
+import * as Switch from '@radix-ui/react-switch';
+import React from 'react';
+
+export const SwitchRoot: React.FC<Switch.SwitchProps> = ({ children, ...props }) => {
+  return (
+    <Switch.Root
+      className="relative h-[25px] w-[42px] cursor-default rounded-full outline-none dark:bg-neutral-700 data-[state=checked]:dark:bg-white"
+      id="airplane-mode"
+      {...props}
+    >
+      {children}
+    </Switch.Root>
+  );
+};
+
+export const SwitchThumb: React.FC<Switch.SwitchThumbProps> = ({ ...props }) => {
+  return (
+    <Switch.Thumb
+      className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px] data-[state=checked]:dark:bg-neutral-900"
+      {...props}
+    />
+  );
+};