📅 Hip-Hop Timeline

\n \n {/* Filters */}\n

Filter by Category

\n setSelectedCategory('all')}\n className={`px-4 py-2 rounded-lg transition-colors ${\n selectedCategory === 'all'\n ? 'bg-purple-600 text-white'\n : 'bg-gray-700 text-gray-300 hover:bg-gray-600'\n }`}\n >\n All Categories\n \n {categories.map(category => (\n setSelectedCategory(category)}\n className={`px-4 py-2 rounded-lg transition-colors flex items-center space-x-2 ${\n selectedCategory === category\n ? 'bg-purple-600 text-white'\n : 'bg-gray-700 text-gray-300 hover:bg-gray-600'\n }`}\n >\n {categoryEmojis[category as keyof typeof categoryEmojis]}\n {category}\n \n ))}\n

\n\n

Filter by Decade

\n {['all', '1970s', '1980s', '1990s'].map(decade => (\n setSelectedDecade(decade)}\n className={`px-4 py-2 rounded-lg transition-colors ${\n selectedDecade === decade\n ? 'bg-purple-600 text-white'\n : 'bg-gray-700 text-gray-300 hover:bg-gray-600'\n }`}\n >\n {decade === 'all' ? 'All Decades' : decade}\n \n ))}\n

\n\n {/* Timeline */}\n

\n {filteredEvents.map((event, index) => (\n \n

\n \n {event.category}\n

\n {event.year}{event.month && ` • ${event.month}`}\n

\n \n

\n {categoryEmojis[event.category as keyof typeof categoryEmojis]}\n {event.title}\n

\n \n

\n {event.description}\n

\n \n

🌟 Significance

\n {event.significance}\n

\n \n {event.relatedArtists && event.relatedArtists.length > 0 && (\n

👑 Related Artists

\n {event.relatedArtists.map((artist, artistIndex) => (\n \n {artist}\n \n ))}\n

\n )}\n

\n ))}\n

\n\n {filteredEvents.length === 0 && (\n

No events found for the selected filters.

\n {\n setSelectedCategory('all');\n setSelectedDecade('all');\n }}\n className=\"mt-4 bg-purple-600 hover:bg-purple-700 px-6 py-2 rounded-lg transition-colors\"\n >\n Clear Filters\n \n

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