LinkedIn Post

1'use client';
2 
3import { Repeat2 } from 'lucide-react';
4import type { JSX } from 'react';
5import React, { useEffect, useRef, useState } from 'react';
6import { demoLinkedInPost } from './demo/social';
7 
8/** Reaction type for LinkedIn posts */
9type ReactionType = 'like' | 'celebrate' | 'support' | 'love' | 'insightful' | 'funny';
10 
11/**
12 * ═══════════════════════════════════════════════════════════════════════════
13 * LinkedInPostProps
14 * ═══════════════════════════════════════════════════════════════════════════
15 *
16 * Props for the LinkedInPost component, which displays a LinkedIn-style
17 * post with professional author info.
18 */
19export interface LinkedInPostProps {
20  data?: {
21    /** Author's display name. */
22    author?: string;
23    /** Author's professional headline or title. */
24    headline?: string;
25    /** Avatar letter fallback or image URL for the profile picture. */
26    avatar?: string;
27    /** Post text content (supports line breaks and hashtags). */
28    content?: string;
29    /** Time since posted (e.g., "2h"). */
30    time?: string;
31    /** Optional image URL for the post. */
32    image?: string;
33    /** Number of reactions (e.g., "1,234" or "1.2K"). */
34    reactions?: string;
35    /** Top reaction types to display (max 3 icons shown). */
36    topReactions?: ReactionType[];
37    /** Number of comments (e.g., "56"). */
38    comments?: string;
39    /** Number of reposts (e.g., "12"). */
40    reposts?: string;
41    /** URL to the original LinkedIn post. If provided, shows the LinkedIn icon. */
42    postUrl?: string;
43    /** URL for the repost action. If provided, shows the repost button in footer. */
44    repostUrl?: string;
45  };
46  appearance?: {
47    /** Maximum number of lines to show before truncating. @default 3 */
48    maxLines?: number;
49  };
50}
51 
52/** Parses content and styles hashtags and links */
53function formatContent(content: string): React.ReactNode[] {
54  // Regex to match hashtags and URLs
55  const pattern = /(#\w+)|(https?:\/\/[^\s]+)/g;
56  const parts: React.ReactNode[] = [];
57  let lastIndex = 0;
58  let match;
59 
60  while ((match = pattern.exec(content)) !== null) {
61    // Add text before the match
62    if (match.index > lastIndex) {
63// … truncated