Social post card
A composed social post with author, media, metrics, and a reversible like action.
NewMCMaya Chen@mayamakes · We shipped the navigation batch today: an announcement bar, a grouped menu, and an app tab bar. All three read their motion from the same token set.
Gamma 2.4 — five patterns, one design brief, no copied source.
New · NavigationThree ways into the product.Announcement, menu, tab bar.
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;