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 le informazioni della tua azienda.

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).