Create reusable PanelHeader component for consistent dashboard modules

[josephchimebuka]

Category

reusable components

Labels

frontend, component-system, ui-ux, developer-experience

Difficulty

beginner

Why this matters

Multiple panels duplicate heading/action/status patterns, causing inconsistency and slower feature work.

Likely files/components affected

• src/components/PriceChart.tsx
• src/components/PredictionHistory.tsx
• src/components/Leaderboard.tsx
• New: src/components/ui/PanelHeader.tsx

What contributor should improve

Build reusable PanelHeader with optional action slot and status badge.

Expected final behavior

Module headers are consistent and easy to maintain.

UI/UX goals

• Visual consistency
• Faster development
• Cleaner panel hierarchy

Acceptance criteria

• Shared PanelHeader component added
• Adopted in at least 3 panel components
• Supports title/subtitle/action/status props
• No style regressions

[dayo-dev17]

@dayo-dev17 has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Hi Maintainer,

I would love to work on this issue. I have read the task description and would be able to implement this for your project. Thanks

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

[uzochukwuV]

@uzochukwuV has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Hello, I’m a software engineer and I’ve reviewed this issue. I strongly believe I can solve it so please assign it to me.

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

[Shadow-MMN]

@Shadow-MMN has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Hey, I’ve read through the issue. It’s focused on reducing duplicated dashboard header patterns by introducing a reusable PanelHeader component that standardizes titles, actions, and status indicators across modules.

I will create a flexible PanelHeader component with support for title, subtitle, action, and status props, integrate it into at least three existing panel components, and verify that the refactor improves consistency without introducing visual regressions.

ETA 6 hours.

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