MobileBottomNav

export function MobileBottomNavSpecimen() {
  const [ruta, setRuta] = useState('/app/muro')

  const items = [
    { id: '/app/muro', label: 'Muro', icon: IconChat, href: '/app/muro' },
    { id: '/app/reservar', label: 'Reservar', icon: IconClipboard, href: '/app/reservar' },
    { id: '/app/competir', label: 'Competir', icon: IconTarget, href: '/app/competir' },
    { id: '/app/cuenta', label: 'Cuenta', icon: IconUser, href: '/app/cuenta', badge: 2 },
    { id: 'menu', label: 'Menú', icon: IconMenu, onClick: () => {} },
  ]

  return (
    <Stage label="MobileBottomNav · la barra inferior del panel del socio de Raquetea — activo por currentPath" tall>
      <div className="flex flex-col items-center gap-2 px-1 py-1">
        <PhoneFrame className="w-[240px]">
          <div className="flex h-[340px] flex-col overflow-hidden bg-bkg">
            <div className="flex-1 space-y-2 p-3">
              <div className="h-3 w-28 rounded bg-container" />
              <div className="h-16 rounded-lg bg-container" />
              <div className="h-16 rounded-lg bg-container" />
              <div className="h-16 rounded-lg bg-container" />
            </div>
            <MobileBottomNav
              items={items}
              currentPath={ruta}
              // El vertical pasa un `next/link`. Acá un `<span>` clickeable:
              // los href son de Raquetea, no rutas de este sitio.
              renderLink={({ href, className, children }) => (
                <span
                  role="link"
                  tabIndex={0}
                  className={className}
                  onClick={() => setRuta(href)}
                  onKeyDown={(e) => e.key === 'Enter' && setRuta(href)}
                >
                  {children}
                </span>
              )}
              className="!static md:!flex"
            />
          </div>
        </PhoneFrame>
        <p className="max-w-[380px] text-center text-[11px] text-content/60">
          El activo no se pasa por ítem: sale de comparar `currentPath` contra cada `href`. El
          quinto botón no navega — abre el menú lateral.
        </p>
      </div>
    </Stage>
  )
}

De specimens/navigation.tsx · MobileBottomNavSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.