VPS 4 Builder
041803ebb3
Cria components/SegmentedTabs.tsx (controle segmentado padrão, responsivo, com cor de destaque + ícone + badge) e converte as barras de aba que usavam sublinhado ou pills soltos: Comissões, Glosas, Lab Clientes, Prótese (OS + cotações), Contratos, Profissionais (marketplace) e HorariosConfig. Telas que já usavam o visual (Gestão de Equipe, Notificações, RX, Salas) ficam como referência. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
// SegmentedTabs — controle segmentado (abas em cápsula) PADRÃO do app.
|
|
// Grupo de abas mutuamente exclusivas num trilho cinza; a ativa vira um cartão
|
|
// branco com a cor de destaque. Responsivo: no mobile ocupa a largura toda e
|
|
// distribui igual; no desktop encolhe ao conteúdo. Referência: /minhas-salas.
|
|
import React from 'react';
|
|
|
|
export interface SegTab<T extends string = string> {
|
|
id: T;
|
|
label: string;
|
|
icon?: React.ElementType;
|
|
badge?: number;
|
|
}
|
|
|
|
interface SegmentedTabsProps<T extends string> {
|
|
tabs: SegTab<T>[];
|
|
value: T;
|
|
onChange: (id: T) => void;
|
|
/** Cor de destaque da aba ativa (texto + badge). Padrão: teal do app. */
|
|
accent?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function SegmentedTabs<T extends string>({ tabs, value, onChange, accent = '#0d9488', className = '' }: SegmentedTabsProps<T>) {
|
|
return (
|
|
<div className={`flex gap-1 bg-gray-100/80 p-1 rounded-2xl w-full sm:w-fit overflow-x-auto ${className}`}>
|
|
{tabs.map((t) => {
|
|
const active = value === t.id;
|
|
const Icon = t.icon;
|
|
return (
|
|
<button
|
|
key={t.id}
|
|
onClick={() => onChange(t.id)}
|
|
className={`flex-1 sm:flex-none flex items-center justify-center gap-2 px-3 sm:px-5 py-2.5 rounded-xl text-[11px] font-black uppercase tracking-wider whitespace-nowrap transition-all ${active ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
|
|
style={active ? { color: accent } : {}}
|
|
>
|
|
{Icon && <Icon size={14} className="shrink-0" />}
|
|
<span className="truncate">{t.label}</span>
|
|
{t.badge ? (
|
|
<span className="text-[9px] font-black px-1.5 py-0.5 rounded-full text-white shrink-0" style={{ backgroundColor: accent }}>{t.badge}</span>
|
|
) : null}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|