fix(reviews) fix code based on reviews from the PR

Author: p2arthur

package-lock.json

@@ -130,6 +130,7 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-tailwindcss": "^4.0.0-beta.0",
     "fake-indexeddb": "^6.0.0",
     "happy-dom": "^20.0.8",
     "npm-run-all2": "^8.0.4",

package.json

@@ -7,7 +7,7 @@ import { Loader2 as Loader } from 'lucide-react'
 import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'
 
 const buttonVariants = cva(
-  'relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'relative cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {

src/features/common/components/button.tsx

@@ -1,16 +1,16 @@
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect } from 'react'
 import { TemplatedNavLink } from '@/features/routing/components/templated-nav-link/templated-nav-link'
 import { Urls } from '@/routes/urls'
-import { Telescope, FlaskConical, Coins, X, Settings } from 'lucide-react'
+import { X, Settings } from 'lucide-react'
 import { Search } from '@/features/search/components/search'
-import SvgWizard from '@/features/common/components/icons/wizard'
 import { cn } from '@/features/common/utils'
 import { useSelectedNetwork } from '@/features/network/data'
 import { useLayout } from '@/features/settings/data'
 import SvgLoraDark from '@/features/common/components/svg/lora-dark'
 import SvgLoraLight from '@/features/common/components/svg/lora-light'
 import { NetworkSelect } from '@/features/network/components/network-select'
 import { ThemeToggle } from '@/features/settings/components/theme-toggle'
+import { menuItems } from '../constants/menu-items'
 
 const itemBase =
   'flex items-center gap-3 rounded-md border border-transparent px-3 py-2 hover:bg-accent hover:text-primary transition-colors'
@@ -22,16 +22,6 @@ export default function DrawerMenu() {
   const [layout, setLayout] = useLayout()
   const isOpen = !!layout.isDrawerMenuExpanded
 
-  const menuItems = useMemo(
-    () => [
-      { urlTemplate: Urls.Network.Explore, icon: <Telescope />, text: 'Explore' },
-      { urlTemplate: Urls.Network.AppLab, icon: <FlaskConical />, text: 'App Lab' },
-      { urlTemplate: Urls.Network.TransactionWizard, icon: <SvgWizard width={24} height={24} />, text: 'Txn Wizard' },
-      { urlTemplate: Urls.Network.Fund, icon: <Coins />, text: 'Fund' },
-    ],
-    []
-  )
-
   const navTextClassName = cn('visible transition-[visibility] duration-0 delay-100')
 
   const navIconClassName = cn('border rounded-md p-2')
@@ -89,13 +79,13 @@ export default function DrawerMenu() {
             </button>
           </div>
 
-          <Search />
+          <Search className="w-full" />
         </div>
 
         {/* Items */}
         <nav className="p-3 space-y-1">
           {menuItems.map((item, idx) => (
-            <div onClick={handleClose}>
+            <div key={item.urlTemplate.toString()} onClick={handleClose}>
               <TemplatedNavLink
                 key={idx}
                 urlTemplate={item.urlTemplate}

src/features/layout/components/drawer-menu.tsx

@@ -0,0 +1,29 @@
+// src/features/layout/config/menu-items.ts
+
+import { Telescope, FlaskConical, Coins } from 'lucide-react'
+import SvgWizard from '@/features/common/components/icons/wizard'
+import { Urls } from '@/routes/urls'
+
+// ✅ Use an array of objects so it can be iterated
+export const menuItems = [
+  {
+    urlTemplate: Urls.Network.Explore,
+    icon: <Telescope />,
+    text: 'Explore',
+  },
+  {
+    urlTemplate: Urls.Network.AppLab,
+    icon: <FlaskConical />,
+    text: 'App Lab',
+  },
+  {
+    urlTemplate: Urls.Network.TransactionWizard,
+    icon: <SvgWizard width={24} height={24} />,
+    text: 'Txn Wizard',
+  },
+  {
+    urlTemplate: Urls.Network.Fund,
+    icon: <Coins />,
+    text: 'Fund',
+  },
+]