Tabs

Navigazione a schede con indicatore hover scorrevole estratto dalla Topbar Navigation. Il componente è lo stesso usato internamente da FloatingNavigation — stessi stili, stessa curva, stessa fisica.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@qoovex/ui/components/tabs'

1. Tabs con Pannelli di Contenuto

Navigazione Cantiere

Panoramica del Cantiere

Riepilogo delle attività attive, stato di avanzamento, richieste e decisioni del cantiere selezionato.

2. TabsList Standalone (senza pannelli)

Usato come segmented control senza contenuto associato

3. Impostazioni (Tabs Controllato)

Pannello impostazioni con icone

Gestisci ragione sociale, IBAN e ruoli organizzativi.

4. Anatomia del Componente

Il componente Tabs è stato estratto dalla FloatingNavigation e ne replica esattamente il pattern visivo e interattivo:

  • Indicatore hover — un <span> posizionato in assoluto che misura il boundingClientRect dell'elemento sotto il cursore e scorre con translate3d.
  • Curva di animazione — cubic-bezier(0.16, 1, 0.3, 1) a 260ms per posizione e dimensione, 120ms per opacità.
  • Stato attivo — pillola invertita: bg-foreground text-background con transition-colors.
  • Render polimorfico — TabsTrigger accetta un prop render per renderizzare <a href> invece di <button>.
  • useTabsList() — hook per accedere al contesto e guidare l'indicatore da componenti figli (usato da FloatingNavigation per il resource dropdown).