{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "linkedin-post", "version": "3.1.0", "category": "social", "meta": { "preview": "https://ui.manifest.build/previews/linkedin-post.png", "version": "3.1.0", "changelog": { "1.0.0": "Initial release with professional styling", "1.0.2": "Added comprehensive JSDoc documentation", "1.1.0": "Moved to social category for better organization", "1.1.1": "Updated Props interface with decorative header and sub-parameter JSDoc documentation", "2.0.0": "BREAKING: Simplified component - removed engagement stats and action buttons, added LinkedIn icon link and optional repost button", "2.1.0": "Added image support, engagement stats with reaction icons, expandable content with maxLines prop, and moved repost button to the right", "2.1.1": "Fixed avatar circle visibility - now hides entirely when avatar prop is not provided", "3.0.0": "BREAKING: Moved postUrl and repostUrl from actions to data prop", "3.0.1": "Fixed JSX namespace deprecation and removed dynamic Tailwind class", "3.1.0": "Added demo data defaults - component renders demo content when no data prop is provided" } }, "changelog": { "1.0.0": "Initial release with professional styling", "1.0.2": "Added comprehensive JSDoc documentation", "1.1.0": "Moved to social category for better organization", "1.1.1": "Updated Props interface with decorative header and sub-parameter JSDoc documentation", "2.0.0": "BREAKING: Simplified component - removed engagement stats and action buttons, added LinkedIn icon link and optional repost button", "2.1.0": "Added image support, engagement stats with reaction icons, expandable content with maxLines prop, and moved repost button to the right", "2.1.1": "Fixed avatar circle visibility - now hides entirely when avatar prop is not provided", "3.0.0": "BREAKING: Moved postUrl and repostUrl from actions to data prop", "3.0.1": "Fixed JSX namespace deprecation and removed dynamic Tailwind class", "3.1.0": "Added demo data defaults - component renders demo content when no data prop is provided" }, "title": "LinkedIn Post", "author": "MNFST, Inc", "description": "LinkedIn post card with professional styling.", "dependencies": [ "lucide-react" ], "files": [ { "path": "registry/social/linkedin-post.tsx", "content": "'use client';\n\nimport { Repeat2 } from 'lucide-react';\nimport type { JSX } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { demoLinkedInPost } from './demo/social';\n\n/** Reaction type for LinkedIn posts */\ntype ReactionType = 'like' | 'celebrate' | 'support' | 'love' | 'insightful' | 'funny';\n\n/**\n * ═══════════════════════════════════════════════════════════════════════════\n * LinkedInPostProps\n * ═══════════════════════════════════════════════════════════════════════════\n *\n * Props for the LinkedInPost component, which displays a LinkedIn-style\n * post with professional author info.\n */\nexport interface LinkedInPostProps {\n data?: {\n /** Author's display name. */\n author?: string;\n /** Author's professional headline or title. */\n headline?: string;\n /** Avatar letter fallback or image URL for the profile picture. */\n avatar?: string;\n /** Post text content (supports line breaks and hashtags). */\n content?: string;\n /** Time since posted (e.g., \"2h\"). */\n time?: string;\n /** Optional image URL for the post. */\n image?: string;\n /** Number of reactions (e.g., \"1,234\" or \"1.2K\"). */\n reactions?: string;\n /** Top reaction types to display (max 3 icons shown). */\n topReactions?: ReactionType[];\n /** Number of comments (e.g., \"56\"). */\n comments?: string;\n /** Number of reposts (e.g., \"12\"). */\n reposts?: string;\n /** URL to the original LinkedIn post. If provided, shows the LinkedIn icon. */\n postUrl?: string;\n /** URL for the repost action. If provided, shows the repost button in footer. */\n repostUrl?: string;\n };\n appearance?: {\n /** Maximum number of lines to show before truncating. @default 3 */\n maxLines?: number;\n };\n}\n\n/** Parses content and styles hashtags and links */\nfunction formatContent(content: string): React.ReactNode[] {\n // Regex to match hashtags and URLs\n const pattern = /(#\\w+)|(https?:\\/\\/[^\\s]+)/g;\n const parts: React.ReactNode[] = [];\n let lastIndex = 0;\n let match;\n\n while ((match = pattern.exec(content)) !== null) {\n // Add text before the match\n if (match.index > lastIndex) {\n parts.push(content.slice(lastIndex, match.index));\n }\n\n const hashtag = match[1];\n const url = match[2];\n\n if (hashtag) {\n // Style hashtag\n parts.push(\n \n {hashtag}\n \n );\n } else if (url) {\n // Style link\n parts.push(\n \n {url}\n \n );\n }\n\n lastIndex = pattern.lastIndex;\n }\n\n // Add remaining text\n if (lastIndex < content.length) {\n parts.push(content.slice(lastIndex));\n }\n\n return parts;\n}\n\n/** LinkedIn logo icon component */\nfunction LinkedInIcon({ className }: { className?: string }) {\n return (\n \n \n \n );\n}\n\n/** Reaction icon components - Official LinkedIn reaction SVGs */\nconst reactionIcons: Record = {\n like: (\n \n \n \n \n \n ),\n celebrate: (\n \n \n \n \n \n \n ),\n support: (\n \n \n \n \n \n \n \n \n ),\n love: (\n \n \n \n \n \n \n ),\n insightful: (\n \n \n \n \n \n \n \n \n \n ),\n funny: (\n \n \n \n \n \n \n \n \n \n \n \n ),\n};\n\n/**\n * A LinkedIn post embed component with professional styling.\n * Displays author info and content with optional repost action.\n *\n * Features:\n * - Author avatar with headline\n * - Multi-line content with hashtag support\n * - Optional post image\n * - Expandable content with \"...more\" button\n * - LinkedIn icon link to original post (optional)\n * - Repost button in footer (optional, footer only shows if repostUrl provided)\n *\n * @component\n * @example\n * ```tsx\n * \n * ```\n */\nexport function LinkedInPost({ data, appearance }: LinkedInPostProps) {\n const resolved: NonNullable = data ?? demoLinkedInPost;\n const {\n author,\n headline,\n avatar,\n content,\n time,\n image,\n reactions,\n topReactions,\n comments,\n reposts,\n postUrl,\n repostUrl,\n } = resolved;\n\n const { maxLines = 3 } = appearance ?? {};\n\n const hasEngagement = reactions || comments || reposts;\n\n const [isExpanded, setIsExpanded] = useState(false);\n const [isTruncated, setIsTruncated] = useState(false);\n const contentRef = useRef(null);\n\n useEffect(() => {\n const el = contentRef.current;\n if (el) {\n // Check if content is truncated\n setIsTruncated(el.scrollHeight > el.clientHeight);\n }\n }, [content, maxLines]);\n\n const handleExpand = () => {\n setIsExpanded(true);\n };\n\n return (\n
\n
\n
\n {avatar && (\n
\n {avatar}\n
\n )}\n
\n
\n
\n

{author}

\n

{headline}

\n

{time}

\n
\n {postUrl && (\n \n \n \n )}\n
\n
\n
\n
\n \n {content ? formatContent(content) : null}\n

\n {isTruncated && !isExpanded && (\n \n ...more\n \n )}\n
\n
\n\n {/* Image section */}\n {image && (\n
\n \"Post\n
\n )}\n\n {/* Engagement stats - reactions, comments, reposts */}\n {hasEngagement && (\n
\n
\n {topReactions && topReactions.length > 0 && (\n
\n {topReactions.slice(0, 3).map((type, idx) => (\n \n {reactionIcons[type]}\n
\n ))}\n
\n )}\n {reactions && {reactions}}\n
\n
\n {comments && {comments} comments}\n {reposts && {reposts} reposts}\n
\n
\n )}\n\n {/* Footer with repost button - only shows if repostUrl is provided */}\n {repostUrl && (\n
\n \n \n Repost\n \n
\n )}\n \n );\n}\n", "type": "registry:block", "target": "components/ui/linkedin-post.tsx" }, { "path": "registry/social/demo/social.ts", "content": "// Demo data for Social category components\n// This file contains sample data used for component previews and documentation\n\nexport const demoXPost = {\n author: 'Manifest',\n username: 'manifest_ui',\n avatar: 'M',\n verified: true,\n content: 'Just shipped a new batch of agentic UI components. Build conversational interfaces faster than ever.',\n time: '2h',\n likes: '1.2K',\n retweets: '234',\n replies: '56',\n views: '45.2K',\n}\n\nexport const demoInstagramPost = {\n author: 'manifest.ui',\n avatar: 'M',\n verified: true,\n image:\n 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800',\n caption: 'Building the future of agentic UIs, one component at a time.',\n likes: '2,847',\n time: '2h',\n}\n\nexport const demoLinkedInPost = {\n author: 'Manifest',\n headline: 'Manifest UI | Open Source',\n avatar: 'M',\n content: 'Excited to announce our latest milestone! We\\'ve just crossed 10,000 developers using Manifest to build agentic UIs.',\n time: '1d',\n reactions: '1,234',\n topReactions: ['like', 'celebrate', 'love'] as ('like' | 'celebrate' | 'support' | 'love' | 'insightful' | 'funny')[],\n comments: '56',\n reposts: '12',\n postUrl: 'https://linkedin.com/posts/manifest-123',\n repostUrl: 'https://linkedin.com/shareArticle?url=...',\n}\n\nexport const demoYouTubePost = {\n channel: 'Manifest',\n avatar: 'M',\n title: 'Building Agentic UIs with Manifest',\n views: '12K',\n time: '3 days ago',\n thumbnail:\n 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800',\n duration: '15:42',\n}\n", "type": "registry:lib", "target": "components/ui/demo/social.ts" } ], "categories": [ "social" ], "type": "registry:block" }