タブ切替部品

用途

タブ切替。アクティブ表示・キーボード操作・コンテンツ切替。

特徴

• アクティブ状態管理
• 左右キー操作
• aria 属性
• コンテンツ切替

コード（コピペ用）

'use client';
import { useState, ReactNode } from 'react';

export function Tabs({ tabs }: { tabs: { label: string; content: ReactNode }[] }) {
  const [active, setActive] = useState(0);
  return (
    <div>
      <div role="tablist" style={{ display: 'flex', gap: '.5rem', borderBottom: '1px solid rgba(255,255,255,.07)' }}>
        {tabs.map((t, i) => (
          <button key={i} role="tab" aria-selected={i === active}
            onClick={() => setActive(i)}
            onKeyDown={(e) => {
              if (e.key === 'ArrowRight') setActive((active + 1) % tabs.length);
              if (e.key === 'ArrowLeft')  setActive((active - 1 + tabs.length) % tabs.length);
            }}
            style={{
              padding: '.65rem 1rem',
              borderBottom: i === active ? '2px solid #a5b4fc' : '2px solid transparent',
              color: i === active ? '#fff' : 'rgba(255,255,255,.55)',
              background: 'transparent', border: 'none', cursor: 'pointer',
              fontFamily: 'inherit', fontSize: '.85rem',
            }}>
            {t.label}
          </button>
        ))}
      </div>
      <div role="tabpanel" style={{ paddingTop: '1.25rem' }}>
        {tabs[active].content}
      </div>
    </div>
  );
}

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

• 依存パッケージを忘れず追加