diff options
Diffstat (limited to 'site/src/components/TitleBar.tsx')
| -rw-r--r-- | site/src/components/TitleBar.tsx | 119 |
1 files changed, 119 insertions, 0 deletions
diff --git a/site/src/components/TitleBar.tsx b/site/src/components/TitleBar.tsx new file mode 100644 index 0000000..bf79191 --- /dev/null +++ b/site/src/components/TitleBar.tsx @@ -0,0 +1,119 @@ +import { Link } from 'react-router-dom'; +import { useState, useEffect, useRef } from 'react'; + +interface GameCategory { + name: string; + games: { id: string; title: string }[]; +} + +const TitleBar: React.FC = () => { + const [dropdownOpen, setDropdownOpen] = useState(false); + const dropdownRef = useRef<HTMLDivElement>(null); + + const gameCategories: GameCategory[] = [ + { + name: "KONAMI", + games: [ + { id: "sdvx", title: "SOUND VOLTEX" }, + { id: "iidx", title: "beatmania IIDX" }, + ] + }, + { + name: "SEGA", + games: [ + { id: "chunithm_jp", title: "CHUNITHM JPN" }, + ] + } + ]; + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setDropdownOpen(false); + } + }; + + if (dropdownOpen) { + document.addEventListener('mousedown', handleClickOutside); + } + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [dropdownOpen]); + + return ( + <div className="bg-gray-900 border-b border-gray-800 py-4 px-6"> + <div className="max-w-[800px] mx-auto"> + <div className="flex flex-col sm:flex-row justify-between items-center"> + <div className="flex items-center space-x-3 mb-3 sm:mb-0"> + <img + src="/rasis.webp" + alt="573 Updates Logo" + className="w-8 h-8" + /> + <div className="w-8 h-8 bg-red-700 rounded-md flex items-center justify-center"> + <span className="text-white font-bold">573</span> + </div> + + {/* Site Title */} + <Link to="/" className="text-xl font-bold text-white"> + UPDATES + </Link> + </div> + + {/* Navigation Section */} + <div className="flex items-center space-x-4"> + <Link + to="/" + className="text-gray-300 hover:text-white font-medium" + > + All Games + </Link> + + {/* Dropdown Menu */} + <div className="relative" ref={dropdownRef}> + <button + className="text-gray-300 hover:text-white font-medium flex items-center" + onClick={() => setDropdownOpen(!dropdownOpen)} + > + Game Select + <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> + <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /> + </svg> + </button> + + {dropdownOpen && ( + <div className="absolute right-0 mt-2 w-64 bg-gray-800 border border-gray-700 rounded-md shadow-lg z-10"> + <div className="py-1 max-h-[70vh] overflow-y-auto"> + {gameCategories.map((category, index) => ( + <div key={index} className="px-3 py-2"> + <div className="text-sm font-semibold text-gray-400 mb-1 border-b border-gray-700 pb-1"> + {category.name} + </div> + <div className="space-y-1"> + {category.games.map((game) => ( + <Link + key={game.id} + to={`/game/${game.id}`} + className="block text-gray-300 hover:bg-gray-700 hover:text-white px-2 py-1 text-sm rounded" + onClick={() => setDropdownOpen(false)} + > + {game.title} + </Link> + ))} + </div> + </div> + ))} + </div> + </div> + )} + </div> + </div> + </div> + </div> + </div> + ); +}; + +export default TitleBar;
\ No newline at end of file |