fix(ui): update label style

src/components/nav.tsx

@@ -73,7 +73,11 @@ function NavLink({
     >
       <div className='mr-2'>{icon}</div>
       {title}
-      {label && <span className={cn('ml-auto')}>{label}</span>}
+      {label && (
+        <div className='ml-2 bg-primary text-primary-foreground px-1 rounded-lg text-[0.625rem]'>
+          {label}
+        </div>
+      )}
     </Link>
   )
 }
@@ -89,14 +93,18 @@ function NavLinkDropdown({ title, icon, label, sub }: SideLink) {
       >
         <div className='mr-2'>{icon}</div>
         {title}
+        {label && (
+          <div className='ml-2 bg-primary text-primary-foreground px-1 rounded-lg text-[0.625rem]'>
+            {label}
+          </div>
+        )}
         <span
           className={cn(
-            'ml-1 transition-all group-data-[state="open"]:-rotate-180'
+            'ml-auto transition-all group-data-[state="open"]:-rotate-180'
           )}
         >
           <IconChevronDown stroke={1} />
         </span>
-        {label ? <span className='ml-auto'>{label}</span> : ''}
       </CollapsibleTrigger>
       <CollapsibleContent className='collapsibleDropdown' asChild>
         <ul>

src/pages/dashboard/nav.tsx

@@ -1,85 +0,0 @@
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
-import { Link } from 'react-router-dom'
-
-interface NavProps {
-  isCollapsed: boolean
-  links: {
-    title: string
-    label?: string
-    icon: string // LucideIcon
-    variant: 'default' | 'ghost'
-  }[]
-}
-
-export function Nav({ links, isCollapsed }: NavProps) {
-  return (
-    <div
-      data-collapsed={isCollapsed}
-      className='group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2'
-    >
-      <nav className='grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2'>
-        {links.map((link, index) =>
-          isCollapsed ? (
-            <Tooltip key={index} delayDuration={0}>
-              <TooltipTrigger asChild>
-                <Link
-                  to='#'
-                  className={cn(
-                    buttonVariants({ variant: link.variant, size: 'icon' }),
-                    'h-9 w-9',
-                    link.variant === 'default' &&
-                      'dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white'
-                  )}
-                >
-                  {/* <link.icon className="h-4 w-4" /> */}
-                  <div className='w-4 h-4'>{link.icon}</div>
-                  <span className='sr-only'>{link.title}</span>
-                </Link>
-              </TooltipTrigger>
-              <TooltipContent side='right' className='flex items-center gap-4'>
-                {link.title}
-                {link.label && (
-                  <span className='ml-auto text-muted-foreground'>
-                    {link.label}
-                  </span>
-                )}
-              </TooltipContent>
-            </Tooltip>
-          ) : (
-            <Link
-              key={index}
-              to='#'
-              className={cn(
-                buttonVariants({ variant: link.variant, size: 'sm' }),
-                link.variant === 'default' &&
-                  'dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white',
-                'justify-start'
-              )}
-            >
-              {/* <link.icon className='mr-2 h-4 w-4' /> */}
-              <div className='w-4 h-4 mr-2'>{link.icon} haha</div>
-              {link.title}
-              {link.label && (
-                <span
-                  className={cn(
-                    'ml-auto',
-                    link.variant === 'default' &&
-                      'text-background dark:text-white'
-                  )}
-                >
-                  {link.label}
-                </span>
-              )}
-            </Link>
-          )
-        )}
-      </nav>
-    </div>
-  )
-}