Webpage UI: Posts Detail

[henryajisegiri]

Overview

This ticket covers assembling the Post Detail page, wiring up data/props, and ensuring correct spacing, ordering, and responsive behaviour across all three breakpoints. The page is used for all post types (blog posts, news items, etc.) and shares the same layout.

---

Desktop
Tablet
Mobile

---

Background

The following components exist and are ready to use:

Component	Description
NavBar	Logo, nav links, search (CTRL+K), theme toggle, user avatar, log in — "Posts" tab active
PostHeader	Author avatar, name, badge, date
Footer	Nav links + social icons

---

Breakpoints

Label	Width
Mobile	< 768px
Tablet	768px – 1279px
Desktop	≥ 1280px

---

Props / Data Wiring

• PostHeader — pass author avatar, name, badge, date
• PostBody — pass content including links, markdown, and formatted text
• NextPost — pass next post object (title, description, author avatar, name, badge)
• RelatedPostCard — map over related posts array (title, description, author avatar, name, badge)

---

Acceptance Criteria

• All components render in the correct order per breakpoint
• Related Posts render in a single column across all breakpoints
• Leverage the Post Feed container to build the Next Post and Related Post cards
• Post body renders content correctly including links, markdown, and formatted text. Use the Boostlook2.0 page as reference
• Light and dark mode render correctly for all components
• All props wired with real data, use mock data where necessary
• Tested in Chrome, Safari, Firefox

---

Out of Scope

• Post creation flow (separate ticket)