\n setState(prev => ({ ...prev, currentView: 'home', searchResults: null }))}\n className=\"text-2xl font-bold gradient-text hover:opacity-80 transition-opacity\"\n >\n 🎤 Golden Age Hip-Hop\n \n

\n \n

\n {[\n { key: 'home', label: '🏠 Home' },\n { key: 'artists', label: '👑 Artists' },\n { key: 'albums', label: '💿 Albums' },\n { key: 'timeline', label: '📅 Timeline' },\n { key: 'facts', label: '💡 Facts' }\n ].map(({ key, label }) => (\n setState(prev => ({ ...prev, currentView: key as any, searchResults: null }))}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n state.currentView === key\n ? 'bg-gray-700 text-white'\n : 'text-gray-300 hover:bg-gray-700 hover:text-white'\n }`}\n >\n {label}\n \n ))}\n

\n\n

\n setState(prev => ({ ...prev, searchQuery: e.target.value }))}\n onKeyPress={(e) => e.key === 'Enter' && handleSearch(state.searchQuery)}\n className=\"bg-gray-700 text-white placeholder-gray-400 rounded-lg px-4 py-2 w-64 search-input focus:outline-none focus:ring-2 focus:ring-purple-500\"\n />\n handleSearch(state.searchQuery)}\n className=\"absolute right-2 top-2 text-gray-400 hover:text-white\"\n >\n 🔍\n \n

\n );\n\n const renderHome = () => (\n

\n {/* Hero Section */}\n

\n The Golden Age of Hip-Hop\n

\n Explore the revolutionary era that defined hip-hop culture (1986-1999)\n

\n setState(prev => ({ ...prev, currentView: 'artists' }))}\n className=\"bg-white bg-opacity-20 hover:bg-opacity-30 px-6 py-3 rounded-lg font-semibold transition-all\"\n >\n 👑 Explore Artists\n \n setState(prev => ({ ...prev, currentView: 'timeline' }))}\n className=\"bg-white bg-opacity-20 hover:bg-opacity-30 px-6 py-3 rounded-lg font-semibold transition-all\"\n >\n 📅 View Timeline\n \n

\n\n {/* Random Fact */}\n {state.randomFact && (\n

💡 Did You Know?

\n \n 🎲 New Fact\n \n

\n \n

\n )}\n\n {/* Featured Artists */}\n

👑 Legendary Artists

\n {state.artists.slice(0, 6).map(artist => (\n \n ))}\n

\n\n {/* Featured Albums */}\n

💿 Classic Albums

\n {state.albums.slice(0, 4).map(album => (\n \n ))}\n

\n );\n\n const renderArtists = () => (\n

👑 Golden Age Artists

\n {state.artists.map(artist => (\n \n ))}\n

\n );\n\n const renderAlbums = () => (\n

💿 Classic Albums

\n {state.albums.map(album => (\n \n ))}\n

\n );\n\n const renderFacts = () => (\n

💡 Hip-Hop Facts & Trivia

\n {state.facts.map(fact => (\n \n ))}\n

\n );\n\n const renderSearchResults = () => {\n if (!state.searchResults) return null;\n\n const { artists, albums, events, facts } = state.searchResults;\n const hasResults = artists.length > 0 || albums.length > 0 || events.length > 0 || facts.length > 0;\n\n return (\n

\n 🔍 Search Results for \"{state.searchQuery}\"\n

\n \n {!hasResults ? (\n

No results found. Try a different search term.

\n ) : (\n

\n {artists.length > 0 && (\n

👑 Artists ({artists.length})

\n {artists.map((artist: Artist) => (\n \n ))}\n

\n )}\n\n {albums.length > 0 && (\n

💿 Albums ({albums.length})

\n {albums.map((album: Album) => (\n \n ))}\n

\n )}\n\n {facts.length > 0 && (\n

💡 Facts ({facts.length})

\n {facts.map((fact: HipHopFact) => (\n \n ))}\n

\n )}\n\n {events.length > 0 && (\n

📅 Timeline Events ({events.length})

\n \n

\n )}\n

\n );\n };\n\n const renderContent = () => {\n if (state.loading) {\n return (\n

💿

Loading the golden age...

\n );\n }\n\n switch (state.currentView) {\n case 'artists':\n return renderArtists();\n case 'albums':\n return renderAlbums();\n case 'timeline':\n return ;\n case 'facts':\n return renderFacts();\n case 'search':\n return renderSearchResults();\n default:\n return renderHome();\n }\n };\n\n return (\n

\n {renderNavigation()}\n \n

\n {renderContent()}\n

\n\n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/ado93/doom/code/frontend/components/App.tsx","extension","actionData","errors"]