{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "x-post",
  "version": "1.2.0",
  "category": "social",
  "meta": {
    "preview": "https://ui.manifest.build/previews/x-post.png",
    "version": "1.2.0",
    "changelog": {
      "1.0.0": "Initial release with engagement metrics display",
      "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",
      "1.1.2": "Removed default content data - component only renders explicitly provided data",
      "1.1.3": "Added aria-labels to icon-only action buttons for accessibility",
      "1.2.0": "Added demo data defaults - component renders demo content when no data prop is provided"
    }
  },
  "changelog": {
    "1.0.0": "Initial release with engagement metrics display",
    "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",
    "1.1.2": "Removed default content data - component only renders explicitly provided data",
    "1.1.3": "Added aria-labels to icon-only action buttons for accessibility",
    "1.2.0": "Added demo data defaults - component renders demo content when no data prop is provided"
  },
  "title": "X Post",
  "author": "MNFST, Inc",
  "description": "X (Twitter) post card with engagement metrics.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/social/x-post.tsx",
      "content": "\"use client\"\n\nimport { Heart, MessageCircle, Repeat2, Share, Bookmark } from \"lucide-react\"\nimport { demoXPost } from './demo/social'\n\n/**\n * ═══════════════════════════════════════════════════════════════════════════\n * XPostProps\n * ═══════════════════════════════════════════════════════════════════════════\n *\n * Props for the XPost component, which displays an X (Twitter)-style post\n * with author info, content, and engagement metrics.\n */\nexport interface XPostProps {\n  data?: {\n    /** Author's display name. */\n    author?: string\n    /** Author's handle/username (without the @ symbol). */\n    username?: string\n    /** Avatar letter fallback or image URL for the profile picture. */\n    avatar?: string\n    /** Post text content. */\n    content?: string\n    /** Time since posted (e.g., \"2h\"). */\n    time?: string\n    /** Formatted like count (e.g., \"1.2K\"). */\n    likes?: string\n    /** Formatted retweet/repost count. */\n    retweets?: string\n    /** Formatted reply count. */\n    replies?: string\n    /** Formatted view count (e.g., \"45.2K\"). */\n    views?: string\n    /** Whether the author has a verified badge. */\n    verified?: boolean\n  }\n}\n\n/**\n * An X (Twitter) post embed component with engagement metrics.\n * Displays author info, content, and interactive action buttons.\n *\n * Features:\n * - Author avatar, name, and username\n * - Verified badge support\n * - Engagement metrics (likes, retweets, replies, views)\n * - Interactive action buttons (reply, retweet, like, bookmark, share)\n * - Time display\n *\n * @component\n * @example\n * ```tsx\n * <XPost\n *   data={{\n *     author: \"John Doe\",\n *     username: \"johndoe\",\n *     avatar: \"J\",\n *     content: \"Hello world! This is my first post.\",\n *     time: \"2h\",\n *     likes: \"1.2K\",\n *     retweets: \"234\",\n *     replies: \"56\",\n *     views: \"45.2K\",\n *     verified: true\n *   }}\n * />\n * ```\n */\nexport function XPost({ data }: XPostProps) {\n  const resolved: NonNullable<XPostProps['data']> = data ?? demoXPost\n  const author = resolved?.author\n  const username = resolved?.username\n  const avatar = resolved?.avatar\n  const content = resolved?.content\n  const time = resolved?.time\n  const likes = resolved?.likes\n  const retweets = resolved?.retweets\n  const replies = resolved?.replies\n  const views = resolved?.views\n  const verified = resolved?.verified\n\n  if (!author && !content) {\n    return null\n  }\n\n  return (\n    <div className=\"rounded-xl border bg-card p-4\">\n      <div className=\"flex gap-3\">\n        {avatar && (\n          <div className=\"h-10 w-10 rounded-full bg-foreground text-background flex items-center justify-center font-semibold text-sm shrink-0\">\n            {avatar}\n          </div>\n        )}\n        <div className=\"flex-1 min-w-0\">\n          {(author || username || time) && (\n            <div className=\"flex items-center gap-1 flex-wrap\">\n              {author && <span className=\"font-bold text-sm\">{author}</span>}\n              {verified && (\n                <svg className=\"h-4 w-4 text-blue-500\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                  <path d=\"M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z\" />\n                </svg>\n              )}\n              {username && <span className=\"text-muted-foreground text-sm\">@{username}</span>}\n              {time && <span className=\"text-muted-foreground text-sm\">· {time}</span>}\n            </div>\n          )}\n          {content && <p className=\"text-sm mt-1 whitespace-pre-wrap\">{content}</p>}\n          {(replies || retweets || likes || views) && (\n            <div className=\"flex items-center justify-between mt-3 text-muted-foreground max-w-md\">\n              {replies !== undefined && (\n                <button aria-label=\"Reply\" className=\"flex items-center gap-1.5 hover:text-blue-500 transition-colors text-xs cursor-pointer\">\n                  <MessageCircle className=\"h-4 w-4\" />\n                  <span>{replies}</span>\n                </button>\n              )}\n              {retweets !== undefined && (\n                <button aria-label=\"Repost\" className=\"flex items-center gap-1.5 hover:text-green-500 transition-colors text-xs cursor-pointer\">\n                  <Repeat2 className=\"h-4 w-4\" />\n                  <span>{retweets}</span>\n                </button>\n              )}\n              {likes !== undefined && (\n                <button aria-label=\"Like\" className=\"flex items-center gap-1.5 hover:text-pink-500 transition-colors text-xs cursor-pointer\">\n                  <Heart className=\"h-4 w-4\" />\n                  <span>{likes}</span>\n                </button>\n              )}\n              {views !== undefined && (\n                <button aria-label=\"Views\" className=\"flex items-center gap-1.5 hover:text-blue-500 transition-colors text-xs cursor-pointer\">\n                  <svg className=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                    <path d=\"M3 12h4l3 8 4-16 3 8h4\" />\n                  </svg>\n                  <span>{views}</span>\n                </button>\n              )}\n              <button aria-label=\"Bookmark\" className=\"hover:text-blue-500 transition-colors cursor-pointer\">\n                <Bookmark className=\"h-4 w-4\" />\n              </button>\n              <button aria-label=\"Share\" className=\"hover:text-blue-500 transition-colors cursor-pointer\">\n                <Share className=\"h-4 w-4\" />\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/ui/x-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"
}