4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T49fa,'use client'; import { Repeat2 } from 'lucide-react'; import type { JSX } from 'react'; import React, { useEffect, useRef, useState } from 'react'; import { demoLinkedInPost } from './demo/social'; /** Reaction type for LinkedIn posts */ type ReactionType = 'like' | 'celebrate' | 'support' | 'love' | 'insightful' | 'funny'; /** * ═══════════════════════════════════════════════════════════════════════════ * LinkedInPostProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for the LinkedInPost component, which displays a LinkedIn-style * post with professional author info. */ export interface LinkedInPostProps { data?: { /** Author's display name. */ author?: string; /** Author's professional headline or title. */ headline?: string; /** Avatar letter fallback or image URL for the profile picture. */ avatar?: string; /** Post text content (supports line breaks and hashtags). */ content?: string; /** Time since posted (e.g., "2h"). */ time?: string; /** Optional image URL for the post. */ image?: string; /** Number of reactions (e.g., "1,234" or "1.2K"). */ reactions?: string; /** Top reaction types to display (max 3 icons shown). */ topReactions?: ReactionType[]; /** Number of comments (e.g., "56"). */ comments?: string; /** Number of reposts (e.g., "12"). */ reposts?: string; /** URL to the original LinkedIn post. If provided, shows the LinkedIn icon. */ postUrl?: string; /** URL for the repost action. If provided, shows the repost button in footer. */ repostUrl?: string; }; appearance?: { /** Maximum number of lines to show before truncating. @default 3 */ maxLines?: number; }; } /** Parses content and styles hashtags and links */ function formatContent(content: string): React.ReactNode[] { // Regex to match hashtags and URLs const pattern = /(#\w+)|(https?:\/\/[^\s]+)/g; const parts: React.ReactNode[] = []; let lastIndex = 0; let match; while ((match = pattern.exec(content)) !== null) { // Add text before the match if (match.index > lastIndex) { parts.push(content.slice(lastIndex, match.index)); } const hashtag = match[1]; const url = match[2]; if (hashtag) { // Style hashtag parts.push( {hashtag} ); } else if (url) { // Style link parts.push( {url} ); } lastIndex = pattern.lastIndex; } // Add remaining text if (lastIndex < content.length) { parts.push(content.slice(lastIndex)); } return parts; } /** LinkedIn logo icon component */ function LinkedInIcon({ className }: { className?: string }) { return ( ); } /** Reaction icon components - Official LinkedIn reaction SVGs */ const reactionIcons: Record = { like: ( ), celebrate: ( ), support: ( ), love: ( ), insightful: ( ), funny: ( ), }; /** * A LinkedIn post embed component with professional styling. * Displays author info and content with optional repost action. * * Features: * - Author avatar with headline * - Multi-line content with hashtag support * - Optional post image * - Expandable content with "...more" button * - LinkedIn icon link to original post (optional) * - Repost button in footer (optional, footer only shows if repostUrl provided) * * @component * @example * ```tsx * * ``` */ export function LinkedInPost({ data, appearance }: LinkedInPostProps) { const resolved: NonNullable = data ?? demoLinkedInPost; const { author, headline, avatar, content, time, image, reactions, topReactions, comments, reposts, postUrl, repostUrl, } = resolved; const { maxLines = 3 } = appearance ?? {}; const hasEngagement = reactions || comments || reposts; const [isExpanded, setIsExpanded] = useState(false); const [isTruncated, setIsTruncated] = useState(false); const contentRef = useRef(null); useEffect(() => { const el = contentRef.current; if (el) { // Check if content is truncated setIsTruncated(el.scrollHeight > el.clientHeight); } }, [content, maxLines]); const handleExpand = () => { setIsExpanded(true); }; return (

{avatar && (

{avatar}

)}

{author}

{headline}

{time}

{postUrl && ( )}

{content ? formatContent(content) : null}

{isTruncated && !isExpanded && ( )}

{/* Image section */} {image && (

)} {/* Engagement stats - reactions, comments, reposts */} {hasEngagement && (

{topReactions && topReactions.length > 0 && (

{topReactions.slice(0, 3).map((type, idx) => (

{reactionIcons[type]}

))}

)} {reactions && {reactions}}

{comments && {comments} comments} {reposts && {reposts} reposts}

)} {/* Footer with repost button - only shows if repostUrl is provided */} {repostUrl && (

Repost

)}

); } 52:T603,// Demo data for Social category components // This file contains sample data used for component previews and documentation export const demoXPost = { author: 'Manifest', username: 'manifest_ui', avatar: 'M', verified: true, content: 'Just shipped a new batch of agentic UI components. Build conversational interfaces faster than ever.', time: '2h', likes: '1.2K', retweets: '234', replies: '56', views: '45.2K', } export const demoInstagramPost = { author: 'manifest.ui', avatar: 'M', verified: true, image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800', caption: 'Building the future of agentic UIs, one component at a time.', likes: '2,847', time: '2h', } export const demoLinkedInPost = { author: 'Manifest', headline: 'Manifest UI | Open Source', avatar: 'M', content: 'Excited to announce our latest milestone! We\'ve just crossed 10,000 developers using Manifest to build agentic UIs.', time: '1d', reactions: '1,234', topReactions: ['like', 'celebrate', 'love'] as ('like' | 'celebrate' | 'support' | 'love' | 'insightful' | 'funny')[], comments: '56', reposts: '12', postUrl: 'https://linkedin.com/posts/manifest-123', repostUrl: 'https://linkedin.com/shareArticle?url=...', } export const demoYouTubePost = { channel: 'Manifest', avatar: 'M', title: 'Building Agentic UIs with Manifest', views: '12K', time: '3 days ago', thumbnail: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800', duration: '15:42', } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@manifest","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/social/linkedin-post.tsx","content":"$51","type":"registry:block","target":"components/ui/linkedin-post.tsx"},{"path":"registry/social/demo/social.ts","content":"$52","type":"registry:lib","target":"components/ui/demo/social.ts"}],"className":"h-[70svh] min-h-80"}]]}]