{
  "name": "social-components-contextualcomments",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/social/components/ContextualComments.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { responsive } from \"../../../lib/layout-constants.js\";\nimport { cn } from \"../../../lib/utils.js\";\nimport { Card, CardContent } from \"../../ui/card.js\";\nimport { useContextualPosts } from \"../hooks/useContextualPosts.js\";\nimport { SocialFeed } from \"./SocialFeed.js\";\n\nexport interface ContextualCommentsProps {\n\tcontextType: \"tx\" | \"url\" | \"channel\";\n\tcontextValue: string;\n\ttitle?: string;\n\tdescription?: string;\n\tshowHeader?: boolean;\n\tmaxHeight?: string | number;\n\tonPost?: (content: string) => void;\n\tclassName?: string;\n}\n\n/**\n * ContextualComments displays comments/posts related to specific content\n *\n * This component is perfect for showing comments on albums, tracks, articles,\n * or any content that can be identified by a transaction ID or URL.\n *\n * @example\n * ```tsx\n * // Comments on an album\n * <ContextualComments\n *   contextType=\"tx\"\n *   contextValue={albumTxId}\n *   title=\"Comments on 'CHROMAKOPIA'\"\n *   description=\"Share your thoughts on this album\"\n * />\n *\n * // Comments on a URL\n * <ContextualComments\n *   contextType=\"url\"\n *   contextValue=\"https://jamify.com/track/thought-i-was-dead\"\n *   title=\"Track Discussion\"\n * />\n * ```\n */\nexport function ContextualComments({\n\tcontextType,\n\tcontextValue,\n\ttitle,\n\tdescription,\n\tshowHeader = true,\n\tmaxHeight = \"500px\",\n\tonPost,\n\tclassName = \"\",\n}: ContextualCommentsProps) {\n\tconst [page, setPage] = useState(1);\n\tconst { posts, isLoading, refetch } = useContextualPosts({\n\t\tcontextType,\n\t\tcontextValue,\n\t\tpage,\n\t\tlimit: 20,\n\t});\n\n\tconst handleLoadMore = () => {\n\t\tsetPage((prev) => prev + 1);\n\t};\n\n\tconst handlePost = (content: string) => {\n\t\t// In a real implementation, this would create a post with the context\n\t\tconsole.log(\"Creating contextual post:\", {\n\t\t\tcontent,\n\t\t\tcontext: {\n\t\t\t\ttype: contextType,\n\t\t\t\tvalue: contextValue,\n\t\t\t},\n\t\t});\n\n\t\tif (onPost) {\n\t\t\tonPost(content);\n\t\t}\n\n\t\t// Refresh the feed after posting\n\t\trefetch();\n\t};\n\n\treturn (\n\t\t<Card className={className}>\n\t\t\t<CardContent className=\"flex flex-col gap-4 p-6\">\n\t\t\t\t{showHeader && (title || description) && (\n\t\t\t\t\t<div className=\"flex flex-col gap-2\">\n\t\t\t\t\t\t{title && <h3 className=\"text-lg font-semibold\">{title}</h3>}\n\t\t\t\t\t\t{description && (\n\t\t\t\t\t\t\t<p className=\"text-base text-muted-foreground\">{description}</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t<SocialFeed\n\t\t\t\t\tdata={posts || undefined}\n\t\t\t\t\tloading={isLoading}\n\t\t\t\t\thasMore={posts ? posts.count > page * 20 : false}\n\t\t\t\t\tshowCreatePost={true}\n\t\t\t\t\tshowFilters={false}\n\t\t\t\t\tfeedType=\"contextual\"\n\t\t\t\t\tcontext={{\n\t\t\t\t\t\ttype: contextType,\n\t\t\t\t\t\tvalue: contextValue,\n\t\t\t\t\t\tlabel: title,\n\t\t\t\t\t}}\n\t\t\t\t\tonLoadMore={handleLoadMore}\n\t\t\t\t\tonRefresh={refetch}\n\t\t\t\t\tonPost={handlePost}\n\t\t\t\t\tmaxHeight={maxHeight}\n\t\t\t\t/>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/contextualcomments.tsx"
    }
  ]
}