spirzen/it-knowledge-base: Огромная энциклопедия по информационным технологиям. Компьютерная, цифровая, сетевая грамотность, языки, данные, структуры, интеграции, архитектура, микросервисы, контейнеризация, оркестрация и всё такое.

src/components/SyntaxComparePlay.jsx

72 строки2 KB

Spirzen

Mass data fixes

22 май 2026, 04:40

22 май 2026, 04:40e2783b7

import React, {useState} from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
import clsx from 'clsx';
import DemoShell, {DemoCard} from './shared/DemoShell';
import {demoLoadingFallback} from './shared/demoFallback';
import {SYNTAX_COMPARE_ROWS} from './shared/beginnerWebStackData';
import styles from './SyntaxComparePlay.module.css';

export function SyntaxComparePlayInner({compact = false, embedded = false}) {
  const [rowId, setRowId] = useState('hello');
  const row = SYNTAX_COMPARE_ROWS.find((r) => r.id === rowId) ?? SYNTAX_COMPARE_ROWS[0];

  const body = (
    <>
        <div className={styles.rowBar}>
          {SYNTAX_COMPARE_ROWS.map((r) => (
            <button
              key={r.id}
              type="button"
              className={clsx(
                'it-demo__btn it-demo__btn--sm',
                rowId !== r.id && 'it-demo__btn--secondary',
              )}
              onClick={() => setRowId(r.id)}
            >
              {r.label}
            </button>
          ))}
        </div>
        <div className={styles.grid}>
          <div className={clsx(styles.col, styles.colJs)}>
            <div className={styles.colHead}>JavaScript</div>
            <pre>{row.js}</pre>
          </div>
          <div className={clsx(styles.col, styles.colPy)}>
            <div className={styles.colHead}>Python</div>
            <pre>{row.python}</pre>
          </div>
          <div className={clsx(styles.col, styles.colPhp)}>
            <div className={styles.colHead}>PHP</div>
            <pre>{row.php}</pre>
          </div>
        </div>
        <p className={styles.hint}>
          <strong>{row.label}:</strong> {row.hint}
        </p>
    </>
  );

  if (embedded) {
    return <div className={styles.root}>{body}</div>;
  }

  return (
    <DemoShell className={styles.root}>
      <DemoCard
        title={compact ? 'Синтаксис: JS / Python / PHP' : 'Одна идея — три синтаксиса'}
        subtitle="Одна и та же логика — разный синтаксис"
      >
        {body}
      </DemoCard>
    </DemoShell>
  );
}

export default function SyntaxComparePlay(props) {
  return (
    <BrowserOnly fallback={demoLoadingFallback('Загрузка сравнения синтаксиса…')}>
      {() => <SyntaxComparePlayInner {...props} />}
    </BrowserOnly>
  );
}