77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import type { ReactNode } from "react";
|
|
|
|
type DockItem = {
|
|
href: string;
|
|
label: string;
|
|
isActive: (pathname: string) => boolean;
|
|
icon: ReactNode;
|
|
};
|
|
|
|
function DockIcon({ children }: { children: ReactNode }) {
|
|
return (
|
|
<span className="mobile-link-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
|
|
{children}
|
|
</svg>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const dockItems: DockItem[] = [
|
|
{
|
|
href: "/",
|
|
label: "Mapa",
|
|
isActive: (pathname) => pathname === "/",
|
|
icon: <DockIcon><path d="M12 20s6-5.2 6-10a6 6 0 1 0-12 0c0 4.8 6 10 6 10Z" /><circle cx="12" cy="10" r="2.2" /></DockIcon>
|
|
},
|
|
{
|
|
href: "/discover",
|
|
label: "Descubrir",
|
|
isActive: (pathname) => pathname === "/discover" || pathname === "/results",
|
|
icon: <DockIcon><circle cx="11" cy="11" r="6.3" /><path d="m20 20-3.4-3.4" /></DockIcon>
|
|
},
|
|
{
|
|
href: "/messages",
|
|
label: "Mensajes",
|
|
isActive: (pathname) => pathname.startsWith("/messages") || pathname.startsWith("/account/inbox"),
|
|
icon: <DockIcon><path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7A2.5 2.5 0 0 1 17.5 16H10l-4.5 4v-4H6.5A2.5 2.5 0 0 1 4 13.5v-7Z" /></DockIcon>
|
|
},
|
|
{
|
|
href: "/favorites",
|
|
label: "Favoritos",
|
|
isActive: (pathname) => pathname.startsWith("/favorites"),
|
|
icon: <DockIcon><path d="m12 20-1.35-1.23C5.4 14 2 10.92 2 7.1 2 4.48 4.07 2.5 6.6 2.5c1.64 0 3.22.83 4.2 2.14A5.16 5.16 0 0 1 15 2.5c2.53 0 4.6 1.98 4.6 4.6 0 3.82-3.4 6.9-8.65 11.67L12 20Z" /></DockIcon>
|
|
},
|
|
{
|
|
href: "/profile",
|
|
label: "Perfil",
|
|
isActive: (pathname) => pathname.startsWith("/profile") || pathname === "/account",
|
|
icon: <DockIcon><path d="M19 20a7 7 0 0 0-14 0" /><circle cx="12" cy="8" r="4" /></DockIcon>
|
|
}
|
|
];
|
|
|
|
export default function MobileAppDock() {
|
|
const pathname = usePathname();
|
|
|
|
if (
|
|
pathname.startsWith("/app/backoffice")
|
|
|| pathname.startsWith("/admin")
|
|
) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<nav className="mobile-dock" aria-label="Navegacion principal movil">
|
|
{dockItems.map((item) => (
|
|
<a key={item.href} href={item.href} className={`mobile-link ${item.isActive(pathname) ? "active" : ""}`}>
|
|
{item.icon}
|
|
<span>{item.label}</span>
|
|
</a>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|