Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.ca/public_html/src/components/Chat/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useSession } from 'next-auth/react';

interface ParticipantActionsProps {
  participant: { user: { id: string, name: string }, role: string };
  roomId: string;
  onKick: (userId: string) => void;
}

const ParticipantActions: React.FC<ParticipantActionsProps> = ({ participant, roomId, onKick }) => {
  const { data: session } = useSession();
  const [isOpen, setIsOpen] = useState(false);
  const isSelf = session?.user?.id === participant.user.id;
  const isAdmin = session?.user?.role === 'ADMIN';

  const handleKick = () => {
    if (window.confirm(`Are you sure you want to kick ${participant.user.name}?`)) {
      onKick(participant.user.id);
    }
    setIsOpen(false);
  };

  if (isSelf) return null; // Can't perform actions on yourself

  return (
    <div className="relative">
      <button onClick={() => setIsOpen(!isOpen)} className="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
        <svg className="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" /></svg>
      </button>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 border border-gray-200 dark:border-gray-700"
          >
            <ul className="py-1">
              {isAdmin && (
                <>
                  <li className="border-t border-gray-200 dark:border-gray-700 my-1"></li>
                  <li>
                    <button onClick={handleKick} className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/50">
                      Kick from Room
                    </button>
                  </li>
                </>
              )}
            </ul>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

export default ParticipantActions;