Tab Bar Item

"use client";

import MTabItem, { NavigationContext } from "@/components/ui/m-tab-item";
import { Home, Search, Bell, User } from "lucide-react";
import * as React from "react";

const tabs = [
  { id: "home", label: "Home", icon: Home },
  { id: "search", label: "Search", icon: Search },
  { id: "activity", label: "Activity", icon: Bell },
  { id: "profile", label: "Profile", icon: User },
];

export default function MTabItemDemo() {
  const [selected, setSelected] = React.useState("home");

  return (
    <NavigationContext.Provider value={{ selected, select: setSelected }}>
      <nav
        className="flex items-stretch gap-1 border-t border-neutral-200 bg-white px-2 py-1 w-full max-w-sm mx-auto dark:border-neutral-800 dark:bg-neutral-950"
        aria-label="Primary navigation"
      >
        {tabs.map(({ id, label, icon: Icon }) => (
          <MTabItem
            key={id}
            id={id}
            label={label}
            icon={({ active }) => (
              <Icon size={22} strokeWidth={active ? 2.4 : 2} />
            )}
          />
        ))}
      </nav>
    </NavigationContext.Provider>
  );
}