{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "instagram-post",
  "version": "1.2.0",
  "category": "social",
  "meta": {
    "preview": "https://ui.manifest.build/previews/instagram-post.png",
    "version": "1.2.0",
    "changelog": {
      "1.0.0": "Initial release with image and engagement display",
      "1.0.1": "Improved alt text to include author name",
      "1.0.3": "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 image and engagement display",
    "1.0.1": "Improved alt text to include author name",
    "1.0.3": "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": "Instagram Post",
  "author": "MNFST, Inc",
  "description": "Instagram post card with image and engagement.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "registry/social/instagram-post.tsx",
      "content": "\"use client\"\n\nimport { Heart, MessageCircle, Send, Bookmark, MoreHorizontal, Flag, UserMinus, Link, Code } from \"lucide-react\"\nimport { demoInstagramPost } from './demo/social'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\n/**\n * ═══════════════════════════════════════════════════════════════════════════\n * InstagramPostProps\n * ═══════════════════════════════════════════════════════════════════════════\n *\n * Props for the InstagramPost component, which displays an Instagram-style\n * post with image, caption, and engagement actions.\n */\nexport interface InstagramPostProps {\n  data?: {\n    /** Author's Instagram username. */\n    author?: string\n    /** Avatar letter fallback or image URL for the profile picture. */\n    avatar?: string\n    /** URL of the post image to display. */\n    image?: string\n    /** Formatted like count (e.g., \"2,847\"). */\n    likes?: string\n    /** Post caption text content. */\n    caption?: string\n    /** Time since posted (e.g., \"2 hours ago\"). */\n    time?: string\n    /** Whether the author has a verified badge. */\n    verified?: boolean\n  }\n}\n\n/**\n * An Instagram post embed component with image, caption, and engagement.\n * Displays the post with like, comment, share, and save actions.\n *\n * Features:\n * - Square aspect ratio image display\n * - Gradient avatar ring for stories indicator\n * - Verified badge support\n * - Action buttons (like, comment, share, save)\n * - Dropdown menu (report, unfollow, copy link, embed)\n * - Like count and caption display\n *\n * @component\n * @example\n * ```tsx\n * <InstagramPost\n *   data={{\n *     author: \"manifest.ai\",\n *     avatar: \"M\",\n *     image: \"https://example.com/photo.jpg\",\n *     likes: \"2,847\",\n *     caption: \"Check out this amazing view!\",\n *     time: \"2 hours ago\",\n *     verified: true\n *   }}\n * />\n * ```\n */\nexport function InstagramPost({ data }: InstagramPostProps) {\n  const resolved: NonNullable<InstagramPostProps['data']> = data ?? demoInstagramPost\n  const author = resolved?.author\n  const avatar = resolved?.avatar\n  const image = resolved?.image\n  const likes = resolved?.likes\n  const caption = resolved?.caption\n  const time = resolved?.time\n  const verified = resolved?.verified\n\n  if (!author && !image && !caption) {\n    return null\n  }\n\n  return (\n    <div className=\"rounded-xl border bg-card overflow-hidden\">\n      {(author || avatar) && (\n        <div className=\"flex items-center justify-between p-3\">\n          <div className=\"flex items-center gap-2\">\n            {avatar && (\n              <div className=\"h-8 w-8 rounded-full bg-gradient-to-br from-[#833AB4] via-[#FD1D1D] to-[#F77737] p-0.5\">\n                <div className=\"h-full w-full rounded-full bg-card flex items-center justify-center text-xs font-semibold\">\n                  {avatar}\n                </div>\n              </div>\n            )}\n            <div className=\"flex items-center gap-1\">\n              {author && <span className=\"font-semibold text-sm\">{author}</span>}\n              {verified && (\n                <svg className=\"h-3.5 w-3.5 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.484z\" />\n                </svg>\n              )}\n            </div>\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <button className=\"text-foreground hover:text-muted-foreground transition-colors cursor-pointer\">\n                <MoreHorizontal className=\"h-5 w-5\" />\n              </button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>\n                <Flag className=\"mr-2 h-4 w-4\" />\n                Report\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <UserMinus className=\"mr-2 h-4 w-4\" />\n                Unfollow\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <Link className=\"mr-2 h-4 w-4\" />\n                Copy link\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Code className=\"mr-2 h-4 w-4\" />\n                Embed\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      )}\n      {image && (\n        <div className=\"aspect-square bg-muted\">\n          <img src={image} alt={author ? `Instagram post by ${author}` : 'Instagram post'} className=\"w-full h-full object-cover\" />\n        </div>\n      )}\n      {(likes || caption || time) && (\n        <div className=\"p-3 space-y-2\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-4\">\n              <button aria-label=\"Like\" className=\"hover:text-muted-foreground transition-colors cursor-pointer\">\n                <Heart className=\"h-6 w-6\" />\n              </button>\n              <button aria-label=\"Comment\" className=\"hover:text-muted-foreground transition-colors cursor-pointer\">\n                <MessageCircle className=\"h-6 w-6\" />\n              </button>\n              <button aria-label=\"Share\" className=\"hover:text-muted-foreground transition-colors cursor-pointer\">\n                <Send className=\"h-6 w-6\" />\n              </button>\n            </div>\n            <button aria-label=\"Save\" className=\"hover:text-muted-foreground transition-colors cursor-pointer\">\n              <Bookmark className=\"h-6 w-6\" />\n            </button>\n          </div>\n          {likes && <p className=\"font-semibold text-sm\">{likes} likes</p>}\n          {(author || caption) && (\n            <p className=\"text-sm\">\n              {author && <span className=\"font-semibold\">{author}</span>}\n              {author && caption && \" \"}\n              {caption}\n            </p>\n          )}\n          {time && <p className=\"text-xs text-muted-foreground\">{time}</p>}\n        </div>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/ui/instagram-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"
}