14. Stylowanie w React

// Button.module.css
// .button { background: blue; color: white; padding: 8px 16px; }
// .primary { background: navy; }
// .danger { background: red; }

import styles from './Button.module.css';

function Button({ variant = 'primary', children }) {
  return (
    <button className={`${styles.button} ${styles[variant]}`}>
      {children}
    </button>
  );
  // Wynikowa klasa w HTML: "button_abc123 primary_def456"
  // Brak konfliktów z innymi komponentami!
}

function Button({ variant = 'primary', disabled, children }) {
  const baseClasses = 'px-4 py-2 rounded font-medium transition-colors';
  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    danger: 'bg-red-600 text-white hover:bg-red-700',
    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50',
  };

  return (
    <button
      className={`${baseClasses} ${variantClasses[variant]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
      disabled={disabled}
    >
      {children}
    </button>
  );
}

function ProgressBar({ value, max = 100, color = '#3b82f6' }) {
  // Inline dla wartości obliczanych dynamicznie
  const barStyle = {
    width: `${(value / max) * 100}%`,
    backgroundColor: color,  // kolor z API/props
    height: '8px',
    borderRadius: '4px',
    transition: 'width 0.3s ease',
  };

  return <div style={barStyle} role="progressbar" aria-valuenow={value} />;
}