{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "news-feed-shadcnui",
  "type": "registry:component",
  "title": "News Feed",
  "description": "Interactive news feed with categories, search, and animated cards",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/news-feed/news-feed.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport {\n  ArrowRight,\n  Bookmark,\n  Clock,\n  Filter,\n  MessageSquare,\n  MoreHorizontal,\n  Newspaper,\n  Search,\n  Share2,\n  TrendingUp,\n} from \"lucide-react\";\nimport { useState } from \"react\";\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface NewsItem {\n  id: string;\n  title: string;\n  summary: string;\n  category: \"Technology\" | \"Design\" | \"Business\" | \"AI\" | \"Crypto\";\n  author: {\n    name: string;\n    avatar: string;\n    role: string;\n  };\n  publishedAt: string;\n  readTime: string;\n  likes: number;\n  comments: number;\n  trending?: boolean;\n  image?: string;\n}\n\n// ============================================================================\n// DUMMY DATA\n// ============================================================================\n\nconst NEWS_ITEMS: NewsItem[] = [\n  {\n    id: \"1\",\n    title: \"The Future of AI in Modern Interface Design\",\n    summary:\n      \"How artificial intelligence is reshaping the way we interact with digital products and the role of designers in this new era.\",\n    category: \"AI\",\n    author: {\n      name: \"Sarah Chen\",\n      avatar: \"https://i.pravatar.cc/150?u=sarah\",\n      role: \"Product Designer\",\n    },\n    publishedAt: \"2h ago\",\n    readTime: \"5 min read\",\n    likes: 1240,\n    comments: 86,\n    trending: true,\n    image:\n      \"https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&q=80&w=1000\",\n  },\n  {\n    id: \"2\",\n    title: \"WebAssembly: The Next Big Thing in Web Development?\",\n    summary:\n      \"Exploring the potential of WebAssembly to bring desktop-class performance to the web browser.\",\n    category: \"Technology\",\n    author: {\n      name: \"Alex Rivera\",\n      avatar: \"https://i.pravatar.cc/150?u=alex\",\n      role: \"Senior Dev\",\n    },\n    publishedAt: \"4h ago\",\n    readTime: \"8 min read\",\n    likes: 856,\n    comments: 42,\n  },\n  {\n    id: \"3\",\n    title: \"Sustainable Tech: Building Green Software\",\n    summary:\n      \"Why energy efficiency in code matters and how developers can contribute to a more sustainable future.\",\n    category: \"Technology\",\n    author: {\n      name: \"Emma Wilson\",\n      avatar: \"https://i.pravatar.cc/150?u=emma\",\n      role: \"Tech Lead\",\n    },\n    publishedAt: \"5h ago\",\n    readTime: \"6 min read\",\n    likes: 623,\n    comments: 28,\n  },\n  {\n    id: \"4\",\n    title: \"Crypto Markets See Unprecedented Growth\",\n    summary:\n      \"Analysis of the latest market trends and what it means for institutional investors.\",\n    category: \"Crypto\",\n    author: {\n      name: \"Michael Chang\",\n      avatar: \"https://i.pravatar.cc/150?u=michael\",\n      role: \"Financial Analyst\",\n    },\n    publishedAt: \"6h ago\",\n    readTime: \"4 min read\",\n    likes: 2100,\n    comments: 154,\n    trending: true,\n  },\n  {\n    id: \"5\",\n    title: \"Minimalism in 2024: Less is Still More\",\n    summary:\n      \"A look at how minimalist design principles are evolving in the current digital landscape.\",\n    category: \"Design\",\n    author: {\n      name: \"Jessica Kim\",\n      avatar: \"https://i.pravatar.cc/150?u=jessica\",\n      role: \"UX Researcher\",\n    },\n    publishedAt: \"8h ago\",\n    readTime: \"3 min read\",\n    likes: 445,\n    comments: 19,\n  },\n];\n\nconst CATEGORIES = [\"All\", \"Technology\", \"Design\", \"Business\", \"AI\", \"Crypto\"];\n\n// ============================================================================\n// COMPONENTS\n// ============================================================================\n\nfunction NewsCard({ item, index }: { item: NewsItem; index: number }) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ delay: index * 0.1, duration: 0.4 }}\n      whileHover={{ y: -4 }}\n      className=\"group relative overflow-hidden rounded-xl border border-border/40 bg-background/60 p-5 backdrop-blur-sm transition-all hover:border-border/60 hover:shadow-lg hover:bg-background/80\"\n    >\n      {/* Hover Gradient */}\n      <div className=\"absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 pointer-events-none\" />\n\n      <div className=\"flex flex-col gap-4\">\n        {/* Header: Author & Meta */}\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-3\">\n            <Avatar className=\"h-8 w-8 border border-border/50\">\n              <AvatarImage src={item.author.avatar} alt={item.author.name} />\n              <AvatarFallback>{item.author.name[0]}</AvatarFallback>\n            </Avatar>\n            <div className=\"flex flex-col\">\n              <span className=\"text-xs font-medium text-foreground\">\n                {item.author.name}\n              </span>\n              <span className=\"text-[10px] text-muted-foreground\">\n                {item.author.role}\n              </span>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {item.trending && (\n              <Badge\n                variant=\"secondary\"\n                className=\"bg-amber-500/10 text-amber-600 hover:bg-amber-500/20 border-amber-500/20 text-[10px] px-2 py-0 h-5 gap-1\"\n              >\n                <TrendingUp className=\"h-3 w-3\" />\n                Trending\n              </Badge>\n            )}\n            <span className=\"text-xs text-muted-foreground flex items-center gap-1\">\n              <Clock className=\"h-3 w-3\" />\n              {item.publishedAt}\n            </span>\n          </div>\n        </div>\n\n        {/* Content */}\n        <div className=\"space-y-2\">\n          <div className=\"flex items-start justify-between gap-4\">\n            <h3 className=\"text-lg font-semibold leading-tight tracking-tight text-foreground group-hover:text-primary transition-colors\">\n              {item.title}\n            </h3>\n            <Badge\n              variant=\"outline\"\n              className=\"shrink-0 text-[10px] font-normal opacity-70\"\n            >\n              {item.category}\n            </Badge>\n          </div>\n          <p className=\"text-sm text-muted-foreground line-clamp-2 leading-relaxed\">\n            {item.summary}\n          </p>\n        </div>\n\n        {/* Footer: Actions & Stats */}\n        <div className=\"flex items-center justify-between pt-2 border-t border-border/30 mt-2\">\n          <div className=\"flex items-center gap-4\">\n            <button className=\"flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors\">\n              <MessageSquare className=\"h-3.5 w-3.5\" />\n              {item.comments}\n            </button>\n            <button className=\"flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors\">\n              <Share2 className=\"h-3.5 w-3.5\" />\n              Share\n            </button>\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-xs text-muted-foreground\">\n              {item.readTime}\n            </span>\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              className=\"h-7 w-7 p-0 rounded-full hover:bg-primary/10 hover:text-primary\"\n            >\n              <Bookmark className=\"h-3.5 w-3.5\" />\n            </Button>\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              className=\"h-7 w-7 p-0 rounded-full hover:bg-primary/10 hover:text-primary\"\n            >\n              <ArrowRight className=\"h-3.5 w-3.5\" />\n            </Button>\n          </div>\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\nexport function NewsFeed() {\n  const [activeCategory, setActiveCategory] = useState(\"All\");\n  const [searchQuery, setSearchQuery] = useState(\"\");\n\n  const filteredNews = NEWS_ITEMS.filter((item) => {\n    const matchesCategory =\n      activeCategory === \"All\" || item.category === activeCategory;\n    const matchesSearch =\n      item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      item.summary.toLowerCase().includes(searchQuery.toLowerCase());\n    return matchesCategory && matchesSearch;\n  });\n\n  return (\n    <div className=\"w-full mx-auto space-y-8 min-h-[600px]\">\n      {/* Header Section */}\n      <div className=\"flex flex-col md:flex-row md:items-center justify-between gap-4\">\n        <div className=\"space-y-1\">\n          <h2 className=\"text-2xl font-bold tracking-tight flex items-center gap-2\">\n            <Newspaper className=\"h-6 w-6 text-primary\" />\n            Latest Updates\n          </h2>\n          <p className=\"text-sm text-muted-foreground\">\n            Stay informed with the most recent news and insights.\n          </p>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <div className=\"relative\">\n            <Search className=\"absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n            <Input\n              placeholder=\"Search news...\"\n              className=\"pl-9 w-[200px] bg-background/50 backdrop-blur-sm border-border/50 focus:bg-background transition-all\"\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n            />\n          </div>\n          <Button variant=\"outline\" size=\"icon\" className=\"shrink-0\">\n            <Filter className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </div>\n\n      {/* Categories */}\n      <div className=\"flex items-center gap-2 overflow-x-auto pb-2 scrollbar-hide\">\n        {CATEGORIES.map((category) => (\n          <button\n            key={category}\n            onClick={() => setActiveCategory(category)}\n            className={`\n              px-4 py-1.5 rounded-full text-xs font-medium transition-all whitespace-nowrap\n              ${\n                activeCategory === category\n                  ? \"bg-primary text-primary-foreground shadow-md shadow-primary/20\"\n                  : \"bg-secondary/50 text-secondary-foreground hover:bg-secondary hover:text-foreground border border-transparent hover:border-border/50\"\n              }\n            `}\n          >\n            {category}\n          </button>\n        ))}\n      </div>\n\n      {/* News Grid */}\n      <div className=\"grid gap-4\">\n        <AnimatePresence mode=\"popLayout\">\n          {filteredNews.length > 0 ? (\n            filteredNews.map((item, index) => (\n              <NewsCard key={item.id} item={item} index={index} />\n            ))\n          ) : (\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              className=\"flex flex-col items-center justify-center py-12 text-center space-y-3\"\n            >\n              <div className=\"h-12 w-12 rounded-full bg-muted flex items-center justify-center\">\n                <Search className=\"h-6 w-6 text-muted-foreground\" />\n              </div>\n              <p className=\"text-muted-foreground font-medium\">\n                No news found matching your criteria.\n              </p>\n              <Button\n                variant=\"link\"\n                onClick={() => {\n                  setActiveCategory(\"All\");\n                  setSearchQuery(\"\");\n                }}\n              >\n                Clear filters\n              </Button>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n\n      {/* Load More */}\n      {filteredNews.length > 0 && (\n        <div className=\"flex justify-center pt-4\">\n          <Button\n            variant=\"ghost\"\n            className=\"gap-2 text-muted-foreground hover:text-foreground\"\n          >\n            <MoreHorizontal className=\"h-4 w-4\" />\n            Load More Stories\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/news-feed-shadcnui.tsx"
    }
  ]
}