Skip to main content

PostHeader

Location: src/components/post-parts/PostHeader.jsx

Overview​

PostHeader renders the metadata bar at the top of a post card. It displays the author's name (linked to their HomeRoom), the post timestamp, an "(edited)" indicator if applicable, a voice narration icon, and audience visibility information. For circle-restricted posts, the first circle name is shown as a link with a count of additional circles.

This is a presentational sub-component of the Post component, extracted to keep Post.jsx manageable.

Props​

PropTypeRequiredDefaultDescription
authorobjectYes--Author profile with id, username, and display_name
createdAtstringYes--ISO timestamp of post creation
editedAtstringNo--ISO timestamp of last edit (shows "(edited)" indicator)
hasVoicebooleanNo--Whether the post has voice narration
audiencestringNo--Post audience: 'public', 'friends', or 'circles'
circlesarrayNo--Array of { id, name } objects for circle audience display
onStopPropagationfunctionNo--Click handler to prevent post card navigation when clicking links

Key Behaviors​

  • Author Link: Links to /room/:username (or /room/:id as fallback). Uses onStopPropagation to prevent the post card click handler from firing.
  • Timestamp: Formatted via the formatPostTime utility.
  • Edit Indicator: When editedAt is provided, shows "(edited)" with a tooltip showing the edit timestamp.
  • Voice Indicator: A small Volume2 icon appears when the post has voice narration.
  • Audience Display: Public posts show no indicator. Friends-only posts show a lock with "Friends only". Circle posts show the first circle name as a link, with "+N" for additional circles.

Usage​

import PostHeader from '@/components/post-parts/PostHeader';

<PostHeader
  author={post.profiles}
  createdAt={post.created_at}
  editedAt={post.edited_at}
  hasVoice={!!post.voice_url}
  audience={post.audience}
  circles={circleList}
  onStopPropagation={(e) => e.stopPropagation()}
/>
  • Post -- Parent component that renders PostHeader
  • IntentBadge -- Rendered alongside PostHeader in the post card

Last updated: 2026-02-07