TypeScript 50.6%
JavaScript 46.1%
SQL 2.1%
Shell 0.6%
CSS 0.5%
1"use client";2import Link from "next/link";3import { usePathname } from "next/navigation";4import { IconHeart, IconMap, IconSearch, IconSpark, IconUser } from "./icons";56const TABS = [7 { href: "/recherche", label: "Explorer", Icon: IconSearch, match: /^\/(recherche|propriete|annonce)/ },8 { href: "/carte", label: "Carte", Icon: IconMap, match: /^\/carte/ },9 { href: "/membre/annonces/nouvelle", label: "Publier", Icon: IconSpark, match: /^\/membre\/annonces/ },10 { href: "/favoris", label: "Favoris", Icon: IconHeart, match: /^\/favoris/ },11 { href: "/membre", label: "Compte", Icon: IconUser, match: /^\/(membre|compte|connexion)/ },12];13export function MobileNav() {14 const path = usePathname() ?? "/";15 return (16 <nav className="md:hidden fixed bottom-0 inset-x-0 z-40 bg-white border-t border-line pb-[env(safe-area-inset-bottom)]" aria-label="Navigation mobile">17 <ul className="grid grid-cols-5">18 {TABS.map(({ href, label, Icon, match }) => {19 const active = match.test(path);20 return (21 <li key={href}>22 <Link href={href} className={`flex flex-col items-center gap-0.5 py-2 text-[11px] font-medium ${active ? "text-brand-dark" : "text-ink-3"}`} aria-current={active ? "page" : undefined}>23 <Icon width={22} height={22} />{label}24 </Link>25 </li>26 );27 })}28 </ul>29 </nav>30 );31}32