Implement Header Component For Main Game Page

[OWK50GA]

📚 Overview

This issue focuses on building the header component that the leaderboard page consumes. Additionally, a landing page integrating this header is to be set up according to the Figma design. The new components should be organized within the ui/ folder, ensuring a modular structure.

🛠️ Tasks

1. Header Component

   • Build the header component as per the design found in Figma.
   • Ensure the component is created inside the ui/ folder.

2. Landing Page Implementation

   • Inside the src/ui/ directory, create a new folder named pages/.
   • Create a file called Header.tsx in the pages/ folder which serves as the landing page incorporating the header component.
   • Implement the landing page to follow the four steps up to the final login state, as illustrated in the Figma design.

3. Modularity & Component Organization

   • Place individual UI components that are associated with the header within the src/ui/components/ folder. For example, if there are button components or sub-components, organize them as: src/ui/components/Header/Button.tsx.

4. Routing

   • Use React Router in the project to enable viewing the header via the new landing page.

5. Constraints

   • Do not modify any code or files outside the scope of this issue.

✅ Definition of Done

• The header component is implemented according to the Figma design.
• The landing page (Header.tsx in src/ui/pages/) integrates all four steps up to the login state.
• Components are modularly organized within the project (i.e., using the src/ui/components/ folder).
• Proper routing via React Router is set up to view the landing page.
• No unrelated files or code are altered.

Let's bring this UI component to life! 🚀

[Michelle031]

Hi,

My name is Angel, a frontend developer with experience in React, TypeScript, and UI component structuring. I have a strong background in implementing modular, scalable designs while ensuring adherence to project guidelines.

My Approach to Resolving This Issue:
Review the Figma design to ensure pixel-perfect implementation.

Create the header component inside the src/ui/ folder as required.

Ensure the header maintains proper styling, responsiveness, and modularity.

Use React Router to enable navigation to the landing page and ensure correct routing.

Maintain code consistency with the existing project structure without modifying unrelated files.

ETA:12 hours

[Michelle031]

Hi,

I can't access the page whenever I run the project, this is the error I get in the console