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

src/components/DevOpsToolsStackPlay.jsx

56 строк2 KB

Spirzen

Components pack 2

23 май 2026, 03:42

23 май 2026, 03:42b7f65e4

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 {DEVOPS_TOOLS} from './shared/devopsCiCdEngines';
import styles from './devopsCiCdDemo.module.css';

function DevOpsToolsStackPlayInner() {
  const [active, setActive] = useState(DEVOPS_TOOLS[0].id);
  const cat = DEVOPS_TOOLS.find((t) => t.id === active) ?? DEVOPS_TOOLS[0];

  return (
    <DemoShell className={styles.root}>
      <DemoCard
        title="Стек автоматизации DevOps"
        subtitle="IaC, CI/CD, конфигурация, наблюдаемость и оркестрация — выберите класс инструментов"
      >
        <div className={styles.chips}>
          {DEVOPS_TOOLS.map((t) => (
            <button
              key={t.id}
              type="button"
              className={clsx(styles.chip, active === t.id && styles.chipActive)}
              onClick={() => setActive(t.id)}
            >
              {t.label}
            </button>
          ))}
        </div>
        <div className={styles.panel}>
          <p style={{margin: '0 0 0.5rem', fontSize: '0.88rem'}}>{cat.desc}</p>
          <div className={styles.chips}>
            {cat.tools.map((tool) => (
              <span key={tool} className={styles.chip} style={{cursor: 'default'}}>
                {tool}
              </span>
            ))}
          </div>
        </div>
        <p className="it-demo__hint" style={{marginBottom: 0}}>
          В зрелом конвейере классы связаны: Terraform создаёт среду → Ansible настраивает → GitLab CI
          собирает → Kubernetes разворачивает → Prometheus следит.
        </p>
      </DemoCard>
    </DemoShell>
  );
}

export default function DevOpsToolsStackPlay() {
  return (
    <BrowserOnly fallback={demoLoadingFallback()}>
      {() => <DevOpsToolsStackPlayInner />}
    </BrowserOnly>
  );
}