sourabhrealtime/src/InvitationManager.jsx

ROBUST RICH TEXT EDITOR: Single-pane contentEditable with direct text selection formatting, speech features, undo/redo, professional UI - Perfect TipTap alternative

import React from 'react';
import { UserRole } from './index';

const InvitationManager = ({ 
  invitations = [], 
  acceptInvitation, 
  rejectInvitation 
}) => {
  if (invitations.length === 0) {
    return null;
  }
  
  const handleAccept = (invitationId) => {
    if (acceptInvitation) {
      acceptInvitation(invitationId);
    }
  };
  
  const handleReject = (invitationId) => {
    if (rejectInvitation) {
      rejectInvitation(invitationId);
    }
  };
  
  return (
    <div className="sourabhrealtime-invitations">
      <h3>Invitations</h3>
      <ul className="sourabhrealtime-invitations-list">
        {invitations.map(invitation => (
          <li key={invitation.id} className="sourabhrealtime-invitation-item">
            <div className="sourabhrealtime-invitation-info">
              <p>
                <strong>{invitation.invitedBy}</strong> invited you to collaborate on 
                <strong> {invitation.projectId}</strong> as a <strong>{invitation.role || UserRole.EDITOR}</strong>
              </p>
              <span className="sourabhrealtime-invitation-date">
                {new Date(invitation.timestamp).toLocaleString()}
              </span>
            </div>
            
            <div className="sourabhrealtime-invitation-actions">
              <button 
                onClick={() => handleAccept(invitation.id)}
                className="sourabhrealtime-button"
              >
                Accept
              </button>
              
              <button 
                onClick={() => handleReject(invitation.id)}
                className="sourabhrealtime-button sourabhrealtime-button-secondary"
              >
                Decline
              </button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default InvitationManager;