{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "x-post",
  "title": "X Post",
  "author": "mcpcn",
  "description": "X (Twitter) post card with engagement metrics.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://mcpcn.dev/r/apps-sdk-theme.json"
  ],
  "files": [
    {
      "path": "registry/social/x-post.tsx",
      "content": "\"use client\";\n\nimport { Bookmark, Heart, MessageCircle, Repeat2, Share } from \"lucide-react\";\nimport { createContext, useContext } from \"react\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface XPostData {\n  author?: string;\n  avatar?: string;\n  content?: string;\n  likes?: string;\n  replies?: string;\n  retweets?: string;\n  time?: string;\n  username?: string;\n  verified?: boolean;\n  views?: string;\n}\n\nconst DEFAULT_POST: XPostData = {\n  author: \"mcpcn\",\n  avatar: \"M\",\n  content:\n    \"Just shipped a new batch of agentic UI components. Build conversational interfaces faster than ever.\",\n  likes: \"1.2K\",\n  replies: \"56\",\n  retweets: \"234\",\n  time: \"2h\",\n  username: \"mcpcn\",\n  verified: true,\n  views: \"45.2K\",\n};\n\nconst XPostContext = createContext<XPostData | null>(null);\n\nexport const useXPost = () => {\n  const context = useContext(XPostContext);\n  if (!context) {\n    throw new Error(\"XPost components must be used within XPost\");\n  }\n  return context;\n};\n\nexport interface XPostProps extends ComponentProps<\"article\"> {\n  data?: XPostData;\n}\n\nexport const XPostAvatar = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<\"div\">) => {\n  const data = useXPost();\n  return (\n    <div\n      className={cn(\n        \"flex size-10 shrink-0 items-center justify-center rounded-full bg-foreground font-semibold text-background text-sm\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? data.avatar}\n    </div>\n  );\n};\n\nconst VerifiedBadge = () => (\n  <svg className=\"size-4 text-blue-500\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\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.334-4.334 6.5a.75.75 0 0 1-1.156.134l-2.415-2.415a.75.75 0 1 1 1.06-1.06l1.77 1.767 3.825-5.74a.75.75 0 0 1 1.25.833z\" />\n  </svg>\n);\n\nexport const XPostHeader = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<\"div\">) => {\n  const data = useXPost();\n  return (\n    <div\n      className={cn(\"flex flex-wrap items-center gap-1\", className)}\n      {...props}\n    >\n      {children ?? (\n        <>\n          {data.author && (\n            <span className=\"font-bold text-sm\">{data.author}</span>\n          )}\n          {data.verified && <VerifiedBadge />}\n          {data.username && (\n            <span className=\"text-muted-foreground text-sm\">\n              @{data.username}\n            </span>\n          )}\n          {data.time && (\n            <span className=\"text-muted-foreground text-sm\">· {data.time}</span>\n          )}\n        </>\n      )}\n    </div>\n  );\n};\n\nconst Metric = ({\n  children,\n  label,\n  value,\n}: {\n  children: React.ReactNode;\n  label: string;\n  value?: string;\n}) => {\n  if (value === undefined) {\n    return null;\n  }\n  return (\n    <button\n      aria-label={label}\n      className=\"flex cursor-pointer items-center gap-1.5 text-xs transition-colors hover:text-blue-500\"\n      type=\"button\"\n    >\n      {children}\n      <span>{value}</span>\n    </button>\n  );\n};\n\nexport const XPostActions = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<\"div\">) => {\n  const data = useXPost();\n  return (\n    <div\n      className={cn(\n        \"mt-3 flex max-w-md items-center justify-between text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <Metric label=\"Reply\" value={data.replies}>\n            <MessageCircle className=\"size-4\" />\n          </Metric>\n          <Metric label=\"Repost\" value={data.retweets}>\n            <Repeat2 className=\"size-4\" />\n          </Metric>\n          <Metric label=\"Like\" value={data.likes}>\n            <Heart className=\"size-4\" />\n          </Metric>\n          <Metric label=\"Views\" value={data.views}>\n            <svg\n              className=\"size-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path d=\"M3 12h4l3 8 4-16 3 8h4\" />\n            </svg>\n          </Metric>\n          <button\n            aria-label=\"Bookmark\"\n            className=\"cursor-pointer transition-colors hover:text-blue-500\"\n            type=\"button\"\n          >\n            <Bookmark className=\"size-4\" />\n          </button>\n          <button\n            aria-label=\"Share\"\n            className=\"cursor-pointer transition-colors hover:text-blue-500\"\n            type=\"button\"\n          >\n            <Share className=\"size-4\" />\n          </button>\n        </>\n      )}\n    </div>\n  );\n};\n\nexport const XPostContent = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { children: React.ReactNode }) => (\n  <div className={cn(\"min-w-0 flex-1\", className)} {...props}>\n    {children}\n  </div>\n);\n\nexport const XPostText = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<\"p\">) => {\n  const data = useXPost();\n  return (\n    <p className={cn(\"mt-1 whitespace-pre-wrap text-sm\", className)} {...props}>\n      {children ?? data.content}\n    </p>\n  );\n};\n\nconst XPostRoot = ({\n  children,\n  className,\n  data,\n  ...props\n}: XPostProps & { children: React.ReactNode }) => {\n  const value = { ...DEFAULT_POST, ...data };\n  return (\n    <XPostContext.Provider value={value}>\n      <article\n        className={cn(\"rounded-xl border bg-card p-4\", className)}\n        {...props}\n      >\n        {children}\n      </article>\n    </XPostContext.Provider>\n  );\n};\n\nexport const XPost = XPostRoot;\n",
      "type": "registry:block",
      "target": "components/ui/x-post.tsx"
    }
  ],
  "categories": [
    "social"
  ],
  "type": "registry:block"
}