FRONTEND - Implement Friends Page UI

[A6dulmalik]

Description

Build the Friends Page UI based on the provided Figma design.
This issue is UI-only and must not consume backend endpoints.
All data should be mocked or passed as props.

Figma Access

This page represents the Following / Followers view and must be accessible via navigation from the Profile page.

The focus is on:

• Component structure
• Layout fidelity
• Reusability
• Responsiveness
• Design accuracy

Design Reference

Friends UI
Link

---

Scope of Work

1. Friends Page Rendering

Create a Friends page component that renders inside the existing layout.

Note

• Side Navigation and Top Navigation already exist
• This issue only concerns the Friends page content

Page title:

• Friends

---

2. Friends Tabs (UI-only)

Implement a tab switcher with:

• Following
• Followers

Requirements:

• Active tab must be visually distinct
• Switching tabs updates the displayed list (mocked data)
• No backend logic

---

3. Friend List Item Component

Create a reusable FriendListItem component.

Each item displays:

• Avatar (mocked or placeholder)
• Username (e.g. Aaron)
• Right arrow / chevron icon

Props:

• avatar
• username
• onClick

Behavior:

• Entire row is clickable
• Divider between list items
• Used for both Following and Followers lists

---

4. Add Friends Action

At the bottom of the page:

• Text: Add Friends +
• Styled as an action button or link

Navigation:

• Routes to a placeholder page (e.g. /friends/add)
• Uses Next.js navigation (useRouter)

---

5. Access Point (Required)

This page must be accessible by clicking:

• Following
• Followers

on the Profile page UI.

Navigation may optionally pass a query param to set the active tab:

• /friends?tab=following
• /friends?tab=followers

---

Requirements

• No API calls
• Use mocked props or temporary constants
• Components must be reusable and composable
• Responsive layout (desktop-first, mobile-friendly)
• Match Figma spacing, colors, and hierarchy closely

---

Acceptance Criteria

• Friends page renders correctly within the existing layout
• Following / Followers tabs switch correctly (UI-only)
• Friend list items are reusable components
• Add Friends action navigates correctly
• Fully responsive across screen sizes
• No API or backend logic
• Clean, readable component structure

---

Contribution Notes

• Read the CONTRIBUTING.md file before starting
• Run all required commands listed there
• Ensure all tests pass before opening a PR
• PRs with failing tests will not be merged

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 150 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[Luluameh]

@Luluameh has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello
Can I be assigned to this I am a frontend developer with 4years of exprience

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Luluameh to this issue.

[Agbeleshe]

@Agbeleshe has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello, please can i be assigned this. I am a full stack developerhave over 4
years of experience building scalable application

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Agbeleshe to this issue.

[Divineifed1]

@Divineifed1 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello Maintainer
Can I work on this?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Divineifed1 to this issue.

[drips-wave]

Congratulations, @Divineifed1! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on January 31, 2026.

🧑‍💻 @Divineifed1: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are issued when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊