import { Link, useMatchRoute } from "@tanstack/react-router"; import { motion } from "framer-motion"; import { useAuth } from "../hooks/useAuth"; import { LucideIcon } from "../lib/iconData"; import { useUIStore } from "../stores/uiStore"; interface TabItemProps { icon: string; label: string; isActive: boolean; } function TabItemWrapper({ icon, label, isActive, children, }: TabItemProps & { children?: React.ReactNode }) { const activeClass = "text-gray-900"; const inactiveClass = "text-gray-400"; const colorClass = isActive ? activeClass : inactiveClass; return ( {label} ); } export function BottomTabBar() { const { data: auth } = useAuth(); const isAuthenticated = !!auth?.user; const openCatalogSearch = useUIStore((s) => s.openCatalogSearch); const openAuthPrompt = useUIStore((s) => s.openAuthPrompt); const matchRoute = useMatchRoute(); const isHome = !!matchRoute({ to: "/" }); const isCollection = !!matchRoute({ to: "/collection", fuzzy: true }); const isSetups = !!matchRoute({ to: "/setups", fuzzy: true }); return (
{/* Home tab — always a Link */} {/* Collection tab — Link if authenticated, button if anonymous */} {isAuthenticated ? ( ) : ( )} {/* Setups tab — Link if authenticated, button if anonymous */} {isAuthenticated ? ( ) : ( )} {/* Search tab — always a button, opens CatalogSearchOverlay */}
); }