search

the-monkeys / the_monkeys

Welcome to The Monkeys, your go-to educational and informational blogging platform! Unleash Your Creativity and Influence: Blog Together, Write Bette
https://themonkeys.live
Apache License 2.0
16 stars 22 forks source link

[Feature]: Add A Tabs Panel In Profile Page To Switch Between All Posts and Collaborative Posts. #167

Closed piyusharmap closed 3 weeks ago

piyusharmap commented 1 month ago

🔰 Type of Feature:

❓ Is your feature request related to a problem? Please describe.

NIL

📃 Describe the solution you'd like.

To achieve this feature, we need a Tabs Panel that we can use to switch between all posts and collaborative posts. For this, we can use the Shadcn Tabs component. The required tasks are:

  1. Remove the existing link to the activity page from the profile section.
  2. Add the Shadcn component to render tabs to switch between 'All' and 'Collab'.
  3. Use some mock data as tab content to show the working of the tabs.

📃 Describe alternatives you've considered.

NIL

👂 Additional context

Use below image as reference: image

obere4u commented 4 weeks ago

I have done this, take a look at what I did and tell me what color I should use on the hover state and if there are any correction before I make a PR Screenshot (9) .

binary-best commented 4 weeks ago

@piyusharmap please help @obere4u with the design

piyusharmap commented 4 weeks ago

@obere4u There are some changes in the design, and now we will be showing a tab switch between all posts and collaborative posts. Please refer to the changes in the issue and design the tabs panel accordingly. For now, you can just use the base Shadcn component to render the tabs.

Shadcn Tabs: https://ui.shadcn.com/docs/components/tabs

obere4u commented 4 weeks ago

@obere4u There are some changes in the design, and now we will be showing a tab switch between all posts and collaborative posts. Please refer to the changes in the issue and design the tabs panel accordingly. For now, you can just use the base Shadcn component to render the tabs.

Shadcn Tabs: https://ui.shadcn.com/docs/components/tabs

Screenshot (10) This is the code of what I did.

binary-best commented 4 weeks ago

@obere4u basic tab switch is ok, go ahead and raise the PR, we will comment incase we require any change.

obere4u commented 3 weeks ago

When I click on the All Post, how will the page look like, same with Collab @piyusharmap

piyusharmap commented 3 weeks ago

A list of blog posts related to current tab. But for now, just add a placeholder stating that the list is currently empty.