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

src/components/LanguageIntroHub.jsx

72 строки2 KB

Spirzen

Big design pack

04 июн 2026, 02:45

04 июн 2026, 02:4550bc995

import React, {useMemo, useState} from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
import clsx from 'clsx';
import DemoShell, {DemoCard} from './shared/DemoShell';
import {demoLoadingFallback} from './shared/demoFallback';
import {LANGUAGE_INTROS} from './shared/languageIntroData';
import TechIcon from './TechIcon';
import {LanguageIntroPlayInner} from './LanguageIntroPlay';
import styles from './LanguageIntroHub.module.css';

const ENTRIES = Object.values(LANGUAGE_INTROS)
  .filter((e) => e.id !== 'legacy-hub')
  .sort((a, b) => (a.name > b.name ? 1 : -1));

function LanguageIntroHubInner() {
  const [topic, setTopic] = useState('python');

  const groups = useMemo(() => {
    const map = new Map();
    for (const e of ENTRIES) {
      const g = e.category;
      if (!map.has(g)) map.set(g, []);
      map.get(g).push(e);
    }
    return [...map.entries()];
  }, []);

  return (
    <DemoShell>
      <DemoCard
        title="Обзор языков из энциклопедии"
        subtitle="Выберите язык — краткие сведения из раздела &quot;Основные языки&quot;"
      >
        <div className={styles.root}>
          {groups.map(([category, items]) => (
            <div key={category} className={styles.group}>
              <div className={styles.groupTitle}>{category}</div>
              <div className={styles.row}>
                {items.map((e) => (
                  <button
                    key={e.id}
                    type="button"
                    className={clsx(
                      'it-demo__btn it-demo__btn--sm',
                      styles.langBtn,
                      topic !== e.id && 'it-demo__btn--secondary',
                    )}
                    onClick={() => setTopic(e.id)}
                  >
                    <TechIcon techId={e.id} variant="badge" size="sm" />
                    <span>{e.name}</span>
                  </button>
                ))}
              </div>
            </div>
          ))}
          <div className={styles.panel}>
            <LanguageIntroPlayInner topic={topic} embedded />
          </div>
        </div>
      </DemoCard>
    </DemoShell>
  );
}

export default function LanguageIntroHub() {
  return (
    <BrowserOnly fallback={demoLoadingFallback('Загрузка обзора языков…')}>
      {() => <LanguageIntroHubInner />}
    </BrowserOnly>
  );
}