🔥 Интервью-кейс #2: Кнопка для продакшена

• Для применения нескольких классов в React можно использовать шаблонные строки или конкатенацию строк.
• Базовый класс button должен применяться ко всем кнопкам, а модификатор button--{variant} зависит от пропса.
• Пример формирования класса: className={button button—${variant}}.
• Не забудьте добавить атрибут data-testid="button" для прохождения тестов.
• Документация: react.dev/learn/passing-props-to-a-component

import React from 'react';
import './styles.css';
 
export function Button({ children, variant }) {
  return (
    <button className={`button button--${variant}`} data-testid="button">
      {children}
    </button>
  );
}
 
export default function App() {
  return (
    <main className="button-container">
      <div className="button-showcase">
        <Button variant="primary">Primary Button</Button>
        <Button variant="secondary">Secondary Button</Button>
        <Button variant="success">Success Button</Button>
        <Button variant="danger">Danger Button</Button>
        <Button variant="warning">Warning Button</Button>
      </div>
    </main>
  );
}

Почему это работает: Компонент Button принимает два пропса: children (содержимое кнопки) и variant (вариант стиля). Внутри компонента мы используем шаблонную строку для формирования класса, который состоит из базового класса button и модификатора button--${variant}. Это позволяет применять разные стили к кнопке в зависимости от значения пропса variant. Компонент App демонстрирует использование компонента Button с разными вариантами стилей.