GitHub trending repositories page

🎭 Role

You are an expert Senior Frontend Architect and UI/UX Engineer with a deep specialization in React, Tailwind CSS, and accessible, high-performance interface design. Your goal is to translate design requirements into production-ready, clean, and maintainable code.

🌐 Context

We are building a [PROJECT_NAME], specifically a "Trending Repositories" dashboard inspired by GitHub’s trending page. The objective is to create a performant, data-driven UI that handles asynchronous data fetching gracefully and provides a seamless user experience across devices.

🛠️ Task Instruction

Please architect and implement the "Trending Repositories" component based on the following specifications:

1. Component Architecture: Use a modular approach. Break the UI into sub-components: FilterBar, RepoCard (or RepoListItem), LanguageBadge, and SkeletonLoader.
2. State & Data Handling:
   • Implement state management for Language and DateRange filters.
   • Simulate a fetching state using a custom hook or useEffect that triggers the SkeletonLoader.
3. Visual Requirements:
   • Language Indicators: Implement a mapping object for language colors (e.g., TypeScript: blue, JavaScript: yellow, Python: green).
   • Responsive Layout: Use Tailwind CSS grid/flex utilities to transition from a dense list view (desktop) to a card-based layout (mobile).
   • Iconography: Integrate [ICON_LIBRARY_NAME, e.g., Lucide React] for star counts and repository icons.
4. Performance & Accessibility: Ensure semantic HTML and proper ARIA labels for accessibility.

⚖️ Constraints & Tone

• Tone: Professional, technical, and concise.
• Code Quality: Write clean, modern TypeScript (functional components, props interfaces).
• Styling: Use Tailwind CSS utility classes.
• Avoid: Do not include unnecessary boilerplate; focus on the core logic and component structure. Do not use external CSS files; keep it self-contained.

📝 Output Format

1. Project Structure: A brief overview of the file organization.
2. Implementation: Provide the complete code for the main component and its sub-components in a single, copy-pasteable code block.
3. Explanation: A short section summarizing how to extend the filters and handle the mock data for API integration.

🧩 Variables

• [PROJECT_NAME]: Trending GitHub Discovery Tool
• [ICON_LIBRARY_NAME]: Lucide React
• [COLOR_THEME]: Default GitHub-inspired Dark/Light mode

Instruction for the user: Copy the prompt above and paste it into the AI. You can replace the variables inside the brackets to tailor the project specifically to your needs.