X Post

1"use client"
2 
3import { Heart, MessageCircle, Repeat2, Share, Bookmark } from "lucide-react"
4import { demoXPost } from './demo/social'
5 
6/**
7 * ═══════════════════════════════════════════════════════════════════════════
8 * XPostProps
9 * ═══════════════════════════════════════════════════════════════════════════
10 *
11 * Props for the XPost component, which displays an X (Twitter)-style post
12 * with author info, content, and engagement metrics.
13 */
14export interface XPostProps {
15  data?: {
16    /** Author's display name. */
17    author?: string
18    /** Author's handle/username (without the @ symbol). */
19    username?: string
20    /** Avatar letter fallback or image URL for the profile picture. */
21    avatar?: string
22    /** Post text content. */
23    content?: string
24    /** Time since posted (e.g., "2h"). */
25    time?: string
26    /** Formatted like count (e.g., "1.2K"). */
27    likes?: string
28    /** Formatted retweet/repost count. */
29    retweets?: string
30    /** Formatted reply count. */
31    replies?: string
32    /** Formatted view count (e.g., "45.2K"). */
33    views?: string
34    /** Whether the author has a verified badge. */
35    verified?: boolean
36  }
37}
38 
39/**
40 * An X (Twitter) post embed component with engagement metrics.
41 * Displays author info, content, and interactive action buttons.
42 *
43 * Features:
44 * - Author avatar, name, and username
45 * - Verified badge support
46 * - Engagement metrics (likes, retweets, replies, views)
47 * - Interactive action buttons (reply, retweet, like, bookmark, share)
48 * - Time display
49 *
50 * @component
51 * @example
52 * ```tsx
53 * <XPost
54 *   data={{
55 *     author: "John Doe",
56 *     username: "johndoe",
57 *     avatar: "J",
58 *     content: "Hello world! This is my first post.",
59 *     time: "2h",
60 *     likes: "1.2K",
61 *     retweets: "234",
62 *     replies: "56",
63 *     views: "45.2K",
64 *     verified: true
65 *   }}
66 * />
67 * ```
68 */
69export function XPost({ data }: XPostProps) {
70  const resolved: NonNullable<XPostProps['data']> = data ?? demoXPost
71  const author = resolved?.author
72  const username = resolved?.username
73  const avatar = resolved?.avatar
74  const content = resolved?.content
75  const time = resolved?.time
76  const likes = resolved?.likes
77// … truncated