PostCard Component

Display individual posts with media and interactions. Supports photos, videos, and audio with likes and artist information.

Basic Post Card

Sarah Smith

12/1/2023

Just dropped this new track! What do you think?

<PostCard 
  id="1"
  artist={{
    name: "Sarah Smith",
    profileImageUrl: "https://example.com/avatar.jpg"
  }}
  caption="Just dropped this new track! What do you think?"
  publishedAt={new Date("2023-12-01T10:00:00Z")}
  media={[
    {
      id: "1",
      type: "image",
      url: "https://example.com/image.jpg"
    }
  ]}
  likeCount={142}
  isLiked={false}
  onLike={() => console.log('Liked post')}
/>

Video Post

Sarah Smith

Just now

Behind the scenes of our latest recording session 🎥

<PostCard 
  id="2"
  artist={{
    name: "Sarah Smith",
    profileImageUrl: "https://example.com/avatar.jpg"
  }}
  caption="Behind the scenes of our latest recording session 🎥"
  publishedAt={new Date()}
  media={[
    {
      id: "2",
      type: "video",
      url: "https://example.com/video.mp4",
      thumbnailUrl: "https://example.com/thumbnail.jpg"
    }
  ]}
  likeCount={89}
  isLiked={true}
  onLike={() => console.log('Liked post')}
/>

Audio Post

Luna Rodriguez

Just now

New acoustic version of 'Midnight Dreams' - let me know what you think! 🎵

<PostCard 
  id="3"
  artist={{
    name: "Luna Rodriguez",
    profileImageUrl: "https://example.com/avatar2.jpg"
  }}
  caption="New acoustic version of 'Midnight Dreams' - let me know what you think! 🎵"
  publishedAt={new Date()}
  media={[
    {
      id: "3",
      type: "audio",
      url: "https://example.com/audio.mp3",
      thumbnailUrl: "https://example.com/cover.jpg"
    }
  ]}
  likeCount={256}
  isLiked={false}
  onLike={() => console.log('Liked post')}
/>

Multiple Media Grid

Echo Chamber

Just now

Some shots from last night's show! 📸

<PostCard 
  id="4"
  artist={{
    name: "Echo Chamber",
    profileImageUrl: "https://example.com/avatar3.jpg"
  }}
  caption="Some shots from last night's show! 📸"
  publishedAt={new Date()}
  media={[
    { id: "1", type: "image", url: "https://example.com/photo1.jpg" },
    { id: "2", type: "image", url: "https://example.com/photo2.jpg" },
    { id: "3", type: "image", url: "https://example.com/photo3.jpg" },
    { id: "4", type: "image", url: "https://example.com/photo4.jpg" },
    { id: "5", type: "image", url: "https://example.com/photo5.jpg" }
  ]}
  likeCount={324}
  isLiked={true}
  onLike={() => console.log('Liked post')}
/>

Text Only Post

Jazz Collective

Just now

Excited to announce our upcoming tour dates! 🎺🎷 We'll be hitting 20 cities across the country this summer. Pre-sale tickets available tomorrow for our subscribers!

Interactive Media

The Midnight Band

Just now

Behind the scenes from our latest music video shoot! 🎬

Note: Click on any media item to see the onMediaClick handler in action. In a real app, this would open a full-screen media viewer.

Props Reference

Prop	Type	Required	Description
id	string	yes	Unique post identifier
artist	Artist	yes	Artist information object
caption	string	no	Post caption text
publishedAt	Date	yes	Publication date
media	MediaItem[]	no	Array of media items
likeCount	number	yes	Number of likes
isLiked	boolean	yes	Whether user liked the post
onLike	() => void	no	Like/unlike callback
onMediaClick	(mediaId: string) => void	no	Media click handler
className	string	no	Additional CSS classes

Type Definitions

Artist Interface

interface Artist {
  name: string;
  profileImageUrl?: string;
}

MediaItem Interface

interface MediaItem {
  id: string;
  type: "image" | "video" | "audio";
  url: string;
  thumbnailUrl?: string;
}