Test

tournament-frontend/src/UserMenu.js

@@ -0,0 +1,59 @@
+import React, { useState, useRef, useEffect } from 'react';
+import './UserMenu.css';
+
+const UserMenu = ({ onSelect, token, onResetTournament, tournamentStarted }) => {
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const handleSelect = (option) => {
+    setOpen(false);
+    if (onSelect) onSelect(option);
+  };
+
+  return (
+    <div className="user-menu" ref={menuRef}>
+      <button className="user-menu-btn" onClick={() => setOpen(!open)}>
+        Admin Menu &#x25BC;
+      </button>
+      {open && (
+        <ul className="user-menu-dropdown">
+          {!token ? (
+            <li onClick={() => handleSelect('profile')}>Login</li>
+          ) : (
+            <>
+              <li onClick={() => handleSelect('create-tournament')}>Create tournament</li>
+              <li onClick={() => handleSelect('load-tournaments')}>Load tournaments</li>
+              <li
+                className={`start-tournament-option${tournamentStarted ? ' disabled' : ''}`}
+                onClick={tournamentStarted ? undefined : () => handleSelect('start-tournament')}
+                style={tournamentStarted ? { cursor: 'not-allowed', opacity: 0.6, position: 'relative' } : {}}
+                {...(tournamentStarted ? { 'data-tooltip': 'The tournament has already started. You cannot start it again.' } : {})}
+              >
+                Start tournament
+                {tournamentStarted && (
+                  <span className="tooltip-text">The tournament has already started. You cannot start it again.</span>
+                )}
+              </li>
+              <li onClick={() => handleSelect('logout')}>Logout</li>
+              <li style={{ color: '#b91c1c', fontWeight: 'bold' }} onClick={() => { setOpen(false); if (onResetTournament) onResetTournament(); }}>Reset Tournament</li>
+            </>
+          )}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default UserMenu;