Skip to component
GGamma

Social post card

A composed social post with author, media, metrics, and a reversible like action.

New
Live previewUse keyboard to interact

Implementation

1"use client";2 3import { useState, type HTMLAttributes, type ReactNode } from "react";4import { BadgeCheck, Heart, MessageCircle, Repeat2, Share } from "lucide-react";5 6export type SocialPostAuthor = {7  name: string;8  handle: string;9  avatar?: ReactNode;10  verified?: boolean;11};12 13export type SocialPostMetrics = {14  replies?: number;15  reposts?: number;16  likes?: number;17  views?: number;18};19 20export type SocialPostCardProps = Omit<21  HTMLAttributes<HTMLElement>,22  "children" | "onChange" | "title"23> & {24  author: SocialPostAuthor;25  /** The post copy. Keep links and mentions in the consumer's markup. */26  body: ReactNode;27  media?: ReactNode;28  timestamp?: string;