Hybrid Tabs

import HybridTabs from "@/components/ruixen/hybrid-tabs";
import { Home, Search, Bell, User, Settings } from "lucide-react";
 
const tabItems = [
  { value: "home", icon: Home, label: "Home", content: "Welcome Home!" },
  {
    value: "search",
    icon: Search,
    label: "Search",
    content: "Find what you need.",
  },
  {
    value: "notifications",
    icon: Bell,
    label: "Alerts",
    content: "You have no new notifications.",
  },
  {
    value: "profile",
    icon: User,
    label: "Profile",
    content: "Your profile info here.",
  },
  {
    value: "settings",
    icon: Settings,
    label: "Settings",
    content: "Adjust your preferences.",
  },
];
 
export default function App() {
  return <HybridTabs items={tabItems} defaultValue="home" />;
}

interface HybridTabItem {
  value: string;
  icon: React.ElementType;
  label: string;
  content?: React.ReactNode;
}