`components/editor/EditorToggle.tsx`

50 lines
'use client';

import { Eye, Code, FileText } from 'lucide-react';

export type EditorMode = 'wysiwyg' | 'html' | 'plaintext';

interface EditorToggleProps {
  mode: EditorMode;
  onModeChange: (mode: EditorMode) => void;
}

const MODES: { id: EditorMode; label: string; Icon: React.ElementType }[] = [
  { id: 'wysiwyg',    label: 'Visual',     Icon: Eye      },
  { id: 'html',       label: 'HTML',       Icon: Code     },
  { id: 'plaintext',  label: 'Plain Text', Icon: FileText },
];

export default function EditorToggle({ mode, onModeChange }: EditorToggleProps) {
  return (
    <div
      className="inline-flex rounded-lg overflow-hidden"
      role="group"
      aria-label="Editor mode"
      style={{ border: '1px solid var(--color-border)' }}
    >
      {MODES.map(({ id, label, Icon }) => {
        const isActive = mode === id;
        return (
          <button
            key={id}
            onClick={() => onModeChange(id)}
            aria-pressed={isActive}
            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset"
            style={{
              backgroundColor: isActive ? 'var(--color-primary)' : 'var(--color-surface-el)',
              color: isActive ? '#fff' : 'var(--color-text-secondary)',
              borderRight: id !== 'plaintext' ? '1px solid var(--color-border)' : 'none',
              cursor: 'pointer',
            }}
          >
            <Icon size={13} aria-hidden="true" />
            <span className="hidden sm:inline">{label}</span>
            <span className="sr-only sm:hidden">{label}</span>
          </button>
        );
      })}
    </div>
  );
}