← back to Dw Boardroom Governance

frontend/src/components/TabNav.tsx

35 lines

const ICONS = ['🏛️', '⚖️', '🤝', '🚀', '🚨'];

export default function TabNav({ tabs, active, onChange }: {
  tabs: string[];
  active: number;
  onChange: (i: number) => void;
}) {
  return (
    <nav style={styles.nav}>
      {tabs.map((tab, i) => (
        <button
          key={tab}
          onClick={() => onChange(i)}
          style={{
            ...styles.tab,
            ...(active === i ? styles.activeTab : {}),
          }}
        >
          <span>{ICONS[i]}</span> {tab}
        </button>
      ))}
    </nav>
  );
}

const styles: Record<string, React.CSSProperties> = {
  nav: { display: 'flex', gap: 2, padding: '0 24px', background: '#12121f', borderBottom: '1px solid #252540' },
  tab: {
    padding: '12px 20px', border: 'none', background: 'transparent', color: '#7a7f96',
    fontSize: 13, fontWeight: 600, cursor: 'pointer', borderBottom: '2px solid transparent',
    transition: 'all 0.2s', display: 'flex', gap: 6, alignItems: 'center', fontFamily: 'inherit',
  },
  activeTab: { color: '#e8eaf0', borderBottomColor: '#8b5cf6', background: '#1a1a2e' },
};