setting up test functionality

components/layout/app-nav.tsx

@@ -2,25 +2,53 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Home, ShoppingBag, Sparkles, UserRound } from "lucide-react";
+import {
+  Home,
+  ListPlus,
+  ShoppingBag,
+  Sparkles,
+  UserRound,
+} from "lucide-react";
 
 import { cn } from "@/lib/utils";
-import { appNavItems, routes } from "@/lib/routes";
+import { appNavItems, routes, type NavItem } from "@/lib/routes";
+
+const gridColsClass = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+} as const;
 
 const navIcons = {
   [routes.avatar]: Home,
+  [routes.habits]: ListPlus,
   [routes.dailyQuiz]: Sparkles,
   [routes.shop]: ShoppingBag,
   [routes.profile]: UserRound,
 } as const;
 
-export function AppNav() {
+type AppNavProps = {
+  items?: readonly NavItem[];
+};
+
+export function AppNav({ items = appNavItems }: AppNavProps) {
   const pathname = usePathname();
+  const columnCount = Math.min(
+    items.length,
+    5,
+  ) as keyof typeof gridColsClass;
 
   return (
     <nav className="fixed inset-x-0 bottom-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
-      <div className="mx-auto grid max-w-lg grid-cols-4 gap-1 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2">
-        {appNavItems.map((item) => {
+      <div
+        className={cn(
+          "mx-auto grid max-w-lg gap-1 px-1 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2",
+          gridColsClass[columnCount],
+        )}
+      >
+        {items.map((item) => {
           const Icon = navIcons[item.href];
           const isActive =
             pathname === item.href ||
@@ -31,7 +59,7 @@ export function AppNav() {
               key={item.href}
               href={item.href}
               className={cn(
-                "flex flex-col items-center gap-1 rounded-lg px-2 py-2 text-[11px] font-medium transition-colors",
+                "flex flex-col items-center gap-1 rounded-lg px-1 py-2 text-[9px] font-medium leading-tight transition-colors",
                 isActive
                   ? "bg-primary text-primary-foreground"
                   : "text-muted-foreground hover:bg-muted hover:text-foreground",