frontend/src/components/MainWorkspace.tsx - master - pv_hum/schemaforge

frontend/src/components/MainWorkspace.tsx
58 строк2 KB
pv_hum
Initial commit
21 май 2026, 22:25
21 май 2026, 22:250de9fa8
import { FileCode2, Network } from 'lucide-react';
import ErDiagramCanvas from './ErDiagramCanvas';
import SqlEditorPanel from './SqlEditorPanel';
import { useStudioStore } from '../store/useStudioStore';

interface Props {
  onRegenerateSql: () => void;
  onParseSql: () => void;
}

export default function MainWorkspace({ onRegenerateSql, onParseSql }: Props) {
  const store = useStudioStore();

  return (
    <section className="main-workspace panel">
      <div className="workspace-header main-workspace-header">
        <div>
          <h2>Рабочая область</h2>
          <p>Одно главное представление: ER-диаграмма или SQL DDL.</p>
        </div>
        <div className="view-switch" role="tablist" aria-label="Переключение представления">
          <button
            role="tab"
            aria-selected={store.activeView === 'er'}
            className={store.activeView === 'er' ? 'active' : ''}
            onClick={() => store.setActiveView('er')}
          >
            <Network size={14} /> ER
          </button>
          <button
            role="tab"
            aria-selected={store.activeView === 'sql'}
            className={store.activeView === 'sql' ? 'active' : ''}
            onClick={() => store.setActiveView('sql')}
          >
            <FileCode2 size={14} /> SQL
          </button>
        </div>
      </div>
      <div className="main-view-panel">
        {store.activeView === 'er' ? (
          <ErDiagramCanvas schema={store.schema} />
        ) : (
          <SqlEditorPanel
            embedded
            sql={store.sqlText}
            generatedSql={store.generatedSql}
            dialect={store.dialect}
            onChange={store.setSqlText}
            onRegenerate={onRegenerateSql}
            onParse={onParseSql}
            onReset={store.resetSqlToGenerated}
          />
        )}
      </div>
    </section>
  );
}