IntegrationCard.jsx

Go to the documentation of this file.

import React from 'react';
 
function IntegrationCard({ integration, configured, isActive, onConfigure, onToggle, onDelete }) {
  return (
    <div className={`integration-card ${configured ? 'configured' : ''} ${isActive ? 'active' : ''}`}>
      <div className="integration-header">
        <div className="integration-logo">
          <img src={integration.logo} alt={`${integration.name} logo`} />
        </div>
        <div className="integration-info">
          <h3>{integration.name}</h3>
          <p>{integration.description}</p>
        </div>
        {configured && (
          <div className={`integration-status ${isActive ? 'active' : 'inactive'}`}>
            {isActive ? '● Active' : '○ Inactive'}
          </div>
        )}
      </div>
      <div className="integration-actions">
        {configured ? (
          <>
            <button onClick={() => onConfigure(integration)} className="btn-secondary">
              Configure
            </button>
            <button 
              onClick={() => onToggle(configured)} 
              className={isActive ? 'btn-warning' : 'btn-primary'}
            >
              {isActive ? 'Deactivate' : 'Activate'}
            </button>
            <button onClick={() => onDelete(configured)} className="btn-danger">
              Delete
            </button>
          </>
        ) : (
          <button onClick={() => onConfigure(integration)} className="btn-primary">
            Add Integration
          </button>
        )}
      </div>
    </div>
  );
}
 
export default IntegrationCard;