Implement a Generic React Component for Weekly Quests, News, and Chests

[ClanCo]

Description

We need to create a new generic React component that will display weekly quests, news, and chests. This component should be structured using Shadcn and should include multiple tabs to represent each category. The developer is encouraged to propose a design that they feel is appropriate, as long as it remains visually coherent with the main site. The image given is just to give a guide feel free to explore.

Tasks

1. Set Up Component Structure:

   • Create a new ContentTabs component in the components directory.
   • Use Shadcn components to ensure the design aligns with our existing UI framework.

2. Tab Structure:

   • Implement a tabbed interface within the ContentTabs component.
   • Each tab should represent one of the following categories:
     • Weekly Quests
     • News
     • Chests

3. Weekly Quests Tab:

   • Create a section to display the current weekly quests.
   • Use appropriate Shadcn components (e.g., cards, lists) to showcase quests.
   • Include relevant details such as quest objectives, rewards, and deadlines.

4. News Tab:

   • Create a section to display the latest news.
   • Use Shadcn components to display news items, with support for titles, descriptions, and timestamps.
   • Ensure the news items are easy to update and display in a visually appealing manner.

5. Chests Tab:

   • Create a section to display available chests.
   • Use Shadcn components to display chest information, including types, rewards, and availability.
   • Ensure this section is visually consistent with the other tabs.

6. Design and Customization:

   • Allow the developer to propose a design that they feel best suits the purpose.
   • Ensure the final design is visually coherent with the main site’s overall design language.
   • Make sure the component is flexible enough for future enhancements or modifications.

7. Responsive Design:

   • Ensure the ContentTabs component is fully responsive.
   • Test the layout on various screen sizes, including mobile, tablet, and desktop.

8. Testing:

   • Write unit tests for the ContentTabs component and its sub-components.
   • Ensure that each tab’s functionality, including content display and navigation, is covered in the tests.

9. Documentation:

   • Update the project’s documentation to include details about the new ContentTabs component.
   • Provide instructions on how to extend or customize the component in the future.

Acceptance Criteria

• A new ContentTabs component exists and integrates seamlessly with the existing app.
• The component includes tabs for Weekly Quests, News, and Chests.
• Each tab displays the relevant content using Shadcn components.
• The developer has the freedom to design the component creatively, as long as it aligns with the main site’s visual style.
• The component is fully responsive and works across different devices.
• All new components and features are fully tested and documented.

[Gift-Naomi]

Hi @ClanCo can I work on this

If I am assigned I will

1. Set Up & Structure: Create the ContentTabs component using Shadcn in the components directory, implementing a tabbed interface for Weekly Quests, News, and Chests.

2. Design & Customization: Use Shadcn components (cards, lists, etc.) for each tab, allowing design flexibility while ensuring alignment with the main site’s style.

3. Testing & Documentation: Write unit tests for each tab's functionality, ensure responsive design across devices, and update documentation with usage and customization instructions.

[raizo07]

@ClanCo I'll like to work on this

[ShantelPeters]

@ClanCo can i please be assigned to this issue

[Cheelax]

Hi everyone. There is a new process for the ODHack, now you must apply to the tasks directly from Onlydust: https://app.onlydust.com/hackathons/odhack-70 We will only look at application made via this process.

[Oshioke-Salaki]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello my name is Oshioke Salaki and i am a proficient Frontend developer and web3 developer. My background in such fields gives an experience that is unmatched. You can trust that i will be efficient in solving this issue in the best way i can in the shortest possible time.

How I plan on tackling this issue

To solve this issue, i would go through what is required of me and make sure that I create the component that is required. I would follow all the steps deligently and make sure i test and document everything i do to ensure smooth running in production. I hope to be assigned to this issue. Thank you

[Oshioke-Salaki]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello my name is Oshioke Salaki and i am a proficient Frontend developer and web3 developer. My background in such fields gives an experience that is unmatched. You can trust that i will be efficient in solving this issue in the best way i can in the shortest possible time.

How I plan on tackling this issue

To solve this issue, i would go through what is required of me and make sure that I create the component that is required. I would follow all the steps deligently and make sure i test and document everything i do to ensure smooth running in production. I hope to be assigned to this issue. Thank you

@Cheelax @ClanCo please i would really really really love to work on this

[onlydustapp[bot]]

The maintainer Cheelax has assigned Oshioke-Salaki to this issue via OnlyDust Platform. Good luck!