From f015145f6cdd863b6fad4e61d32d530cd45faea3 Mon Sep 17 00:00:00 2001
From: Simon Smilga <simon0x1800@gmail.com>
Date: Mon, 15 Sep 2025 10:00:08 -0600
Subject: [PATCH 1/3] feat: Refactor PostCard and PostFilters components for
 improved UI and functionality

---
 src/components/PostComponents/PostCard.tsx    | 317 ++++++++++++------
 src/components/PostComponents/PostFilters.tsx |  74 +---
 src/components/PostComponents/PostsList.tsx   |  71 +---
 3 files changed, 223 insertions(+), 239 deletions(-)

diff --git a/src/components/PostComponents/PostCard.tsx b/src/components/PostComponents/PostCard.tsx
index f114468..fb7e5b0 100644
--- a/src/components/PostComponents/PostCard.tsx
+++ b/src/components/PostComponents/PostCard.tsx
@@ -1,117 +1,228 @@
 "use client";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { getRelativeTime } from "@/lib/date";
-import React from "react";
-import {
-  FaGlobe,
-  FaHashtag,
-  FaReddit,
-  FaTelegram,
-  FaTwitter,
-} from "react-icons/fa";
-import {
-  MdSentimentDissatisfied,
-  MdSentimentNeutral,
-  MdSentimentSatisfied,
-} from "react-icons/md";
 
-import type { Post } from "@prisma/client";
+import { IoIosTrendingUp } from "react-icons/io";
+import { CiChat1 } from "react-icons/ci";
+import { FaTwitter, FaLinkedin, FaReddit } from "react-icons/fa";
 
-type PostCardProps = {
-  post: Post;
+import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
+
+type Source = {
+  name: string;
+  icon: React.ReactNode;
+  count: number;
+  color: string;
 };
 
-const sentimentIcon = (sentiment: string) => {
-  if (sentiment === "BULLISH")
-    return <MdSentimentSatisfied className="text-green-600" />;
-  if (sentiment === "NEUTRAL")
-    return <MdSentimentNeutral className="text-gray-500" />;
-  if (sentiment === "BEARISH")
-    return <MdSentimentDissatisfied className="text-orange-700" />;
-  return <MdSentimentNeutral className="text-gray-400" />;
+type PostData = {
+  title: string;
+  description: string;
+  sentiment: "Bullish" | "Bearish" | "Neutral";
+  sentimentBar: { bullish: number; neutral: number; bearish: number };
+  postCount: number;
+  sources: Source[];
+  categories: string[];
+  extraTags?: string;
 };
 
-const platformIcon = (source: string) => {
-  if (source === "TWITTER") return <FaTwitter className="text-blue-400" />;
-  if (source === "REDDIT") return <FaReddit className="text-orange-500" />;
-  if (source === "TELEGRAM") return <FaTelegram className="text-blue-500" />;
-  return <FaGlobe className="text-gray-400" />;
+// Mock data array
+const mockPostsData: PostData[] = [
+  {
+    title: "Bitcoin Institutional Adoption & Market Sentiment",
+    description:
+      "Major financial institutions showing increased interest in Bitcoin with positive analyst reports...",
+    sentiment: "Bullish",
+    sentimentBar: { bullish: 60, neutral: 25, bearish: 15 },
+    postCount: 24,
+    sources: [
+      {
+        name: "Twitter",
+        icon: <FaTwitter className="w-2 h-2" />,
+        count: 12,
+        color: "text-blue-500",
+      },
+      {
+        name: "LinkedIn",
+        icon: <FaLinkedin className="w-2 h-2" />,
+        count: 8,
+        color: "text-blue-600",
+      },
+      {
+        name: "Reddit",
+        icon: <FaReddit className="w-2 h-2" />,
+        count: 4,
+        color: "text-orange-600",
+      },
+    ],
+    categories: ["Bitcoin", "Institutional", "adoption"],
+    extraTags: "+1",
+  },
+  {
+    title: "Ethereum DeFi Protocol Updates",
+    description:
+      "New developments in decentralized finance protocols showing promising growth patterns...",
+    sentiment: "Neutral",
+    sentimentBar: { bullish: 30, neutral: 50, bearish: 20 },
+    postCount: 18,
+    sources: [
+      {
+        name: "Twitter",
+        icon: <FaTwitter className="w-2 h-2" />,
+        count: 10,
+        color: "text-blue-500",
+      },
+      {
+        name: "Reddit",
+        icon: <FaReddit className="w-2 h-2" />,
+        count: 8,
+        color: "text-orange-600",
+      },
+    ],
+    categories: ["Ethereum", "DeFi", "Protocol"],
+    extraTags: "+2",
+  },
+  {
+    title: "Market Volatility Analysis",
+    description:
+      "Recent market downturn showing concerning trends across major cryptocurrencies...",
+    sentiment: "Bearish",
+    sentimentBar: { bullish: 15, neutral: 25, bearish: 60 },
+    postCount: 32,
+    sources: [
+      {
+        name: "LinkedIn",
+        icon: <FaLinkedin className="w-2 h-2" />,
+        count: 15,
+        color: "text-blue-600",
+      },
+      {
+        name: "Reddit",
+        icon: <FaReddit className="w-2 h-2" />,
+        count: 17,
+        color: "text-orange-600",
+      },
+    ],
+    categories: ["Market", "Volatility", "Analysis"],
+    extraTags: "+3",
+  },
+];
+
+type PostCardProps = {
+  posts?: PostData[];
+  showMultiple?: boolean;
 };
 
-const PostCard: React.FC<PostCardProps> = ({ post }) => (
-  <Card className="bg-gradient-to-br from-white via-gray-100 to-blue-50 text-black border-none rounded-2xl shadow-xl hover:scale-[1.02] hover:shadow-2xl transition-all duration-300 w-full max-w-4xl px-6 py-4">
-    <CardHeader className="p-2">
-      <div className="flex flex-col gap-2">
-        {(post.categories?.length || post.subcategories?.length) && (
-          <div className="flex gap-2 mb-1 flex-wrap">
-            {(post.categories ?? []).map((cat: string, idx: number) => (
-              <span
-                key={`cat-${idx}`}
-                className="inline-flex items-center px-2 py-0.5 rounded-full bg-blue-100 text-blue-700 text-xs font-semibold"
-              >
-                <FaHashtag className="mr-1" />
-                {cat}
-              </span>
-            ))}
-            {(post.subcategories ?? []).map((subcat: string, idx: number) => (
-              <span
-                key={`subcat-${idx}`}
-                className="inline-flex items-center px-2 py-0.5 rounded-full bg-purple-100 text-purple-700 text-xs font-semibold"
-              >
-                <FaHashtag className="mr-1" />
-                {subcat}
-              </span>
-            ))}
-          </div>
-        )}
-        <CardTitle className="text-2xl font-bold tracking-tight leading-snug">
+// Single card component
+export function SinglePostCard({ post }: { post: PostData }) {
+  const sentimentColor =
+    post.sentiment === "Bullish"
+      ? "text-green-700 bg-green-100"
+      : post.sentiment === "Bearish"
+      ? "text-red-700 bg-red-100"
+      : "text-gray-700 bg-gray-100";
+
+  return (
+    <Card className="w-54 h-60 font-sans">
+      <CardHeader className="p-2">
+        <CardTitle className="text-[10px] font-semibold leading-tight mb-1">
           {post.title}
         </CardTitle>
-      </div>
-    </CardHeader>
-    <CardContent className="p-2">
-      <div className="mb-3">
-        <span className="text-base text-gray-800 italic">
-          {post.content && post.content.length > 56
-            ? post.content.slice(0, 56) + "..."
-            : post.content}
-        </span>
-      </div>
-      <div className="flex items-center mt-2 gap-4">
-        <div className="flex h-5 w-28 rounded-full overflow-hidden shadow">
-          <div className="flex-1 bg-green-600" />
-          <div className="flex-1 bg-gray-300" />
-          <div className="flex-1 bg-orange-600" />
+
+        <CardDescription className="text-[8px] text-gray-600 mb-2 line-clamp-2">
+          {post.description}
+        </CardDescription>
+
+        {/* Sentiment indicators */}
+        <div className="flex items-center gap-1 mb-2">
+          <span
+            className={`inline-flex items-center gap-0.5 px-1 py-0.5 text-[8px] font-medium rounded ${sentimentColor}`}
+          >
+            <IoIosTrendingUp className="w-2 h-2" />
+            {post.sentiment}
+          </span>
+          <div className="flex items-center gap-0.5 text-[8px] text-gray-600">
+            <CiChat1 className="w-2 h-2" />
+            {post.postCount}
+          </div>
+        </div>
+
+        {/* Sentiment Bar */}
+        <div className="mb-2">
+          <div className="flex h-1 w-20 rounded overflow-hidden">
+            <div
+              className="bg-green-500"
+              style={{ flex: post.sentimentBar.bullish }}
+            ></div>
+            <div
+              className="bg-gray-300"
+              style={{ flex: post.sentimentBar.neutral }}
+            ></div>
+            <div
+              className="bg-red-500"
+              style={{ flex: post.sentimentBar.bearish }}
+            ></div>
+          </div>
         </div>
-        <span
-          className={`flex items-center gap-1 text-xs font-semibold ${
-            post.sentiment === "BULLISH"
-              ? "text-green-600"
-              : post.sentiment === "BEARISH"
-              ? "text-orange-600"
-              : "text-gray-500"
-          }`}
-        >
-          {sentimentIcon(post.sentiment)}
-          {post.sentiment}
-        </span>
-        <span className="flex items-center gap-1 text-xs text-gray-700">
-          {platformIcon(post.source)}
-          {post.source}
-        </span>
-        <span className="flex items-center gap-1 text-xs text-gray-500">
-          {/* <FaClock /> Time removed as signalTime is not in schema */}
-          {post.createdAt
-            ? getRelativeTime(
-                typeof post.createdAt === "string"
-                  ? post.createdAt
-                  : post.createdAt.toISOString()
-              )
-            : "Invalid date"}
-        </span>
+
+        {/* Source Tags */}
+        <div className="flex flex-wrap gap-1 mb-2 text-[8px]">
+          {post.sources.map((src, idx) => {
+            let pillClass =
+              "px-2 py-0.5 rounded-full flex items-center gap-1 border text-[9px] font-medium";
+            if (src.name === "Twitter")
+              pillClass += " bg-blue-50 text-blue-600 border-blue-200";
+            else if (src.name === "LinkedIn")
+              pillClass += " bg-blue-50 text-blue-600 border-blue-200";
+            else if (src.name === "Reddit")
+              pillClass += " bg-orange-50 text-orange-600 border-orange-200";
+            else pillClass += " bg-gray-50 text-gray-600 border-gray-200";
+            return (
+              <span key={src.name + idx} className={pillClass}>
+                {src.icon}
+                {src.name} <span className="font-semibold">({src.count})</span>
+              </span>
+            );
+          })}
+        </div>
+
+        {/* Category/Subcategory Tags */}
+        <div className="flex flex-wrap gap-0.5">
+          {post.categories.map((cat, idx) => (
+            <span
+              key={cat + idx}
+              className={`px-1 py-0.5 text-[7px] font-medium ${
+                idx === 0
+                  ? "text-white bg-blue-500"
+                  : "text-blue-700 bg-blue-100"
+              } rounded-full`}
+            >
+              #{cat}
+            </span>
+          ))}
+          {post.extraTags && (
+            <span className="text-[7px] text-gray-500 px-1 py-0.5">
+              {post.extraTags}
+            </span>
+          )}
+        </div>
+      </CardHeader>
+    </Card>
+  );
+}
+
+export default function PostCard({
+  posts = mockPostsData,
+  showMultiple = true,
+}: PostCardProps) {
+  if (showMultiple) {
+    return (
+      <div className="flex flex-row justify-center gap-6 p-2">
+        {posts.map((post, index) => (
+          <SinglePostCard key={index} post={post} />
+        ))}
       </div>
-    </CardContent>
-  </Card>
-);
+    );
+  }
 
-export default PostCard;
+  // Show only the first card if showMultiple is false
+  return <SinglePostCard post={posts[0]} />;
+}
diff --git a/src/components/PostComponents/PostFilters.tsx b/src/components/PostComponents/PostFilters.tsx
index 1894135..f260eee 100644
--- a/src/components/PostComponents/PostFilters.tsx
+++ b/src/components/PostComponents/PostFilters.tsx
@@ -1,38 +1,18 @@
-import {
-  Select,
-  SelectItem,
-} from "@/components/ui/select";
+import { Select, SelectItem } from "@/components/ui/select";
 import { Input } from "@/components/ui/input";
 import { PostSortSelect, SortField, SortOrder } from "./PostSortSelect";
 
 interface PostFiltersProps {
   search: string;
   onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  sortField: SortField;
-  sortOrder: SortOrder;
-  onSortFieldChange: (field: SortField) => void;
-  onSortOrderChange: (order: SortOrder) => void;
-  sentimentFilter: string;
-  onSentimentChange: (value: string) => void;
-  sourceFilter: string;
-  onSourceChange: (value: string) => void;
 }
 
 export default function PostFilters({
   search,
   onSearchChange,
-  sortField,
-  sortOrder,
-  onSortFieldChange,
-  onSortOrderChange,
-  sentimentFilter,
-  onSentimentChange,
-  sourceFilter,
-  onSourceChange,
 }: PostFiltersProps) {
   return (
-    <div className="mb-8 space-y-6">
-      {/* Search Bar */}
+    <div className="mb-8">
       <div className="flex justify-center">
         <Input
           value={search}
@@ -41,56 +21,6 @@ export default function PostFilters({
           className="w-full max-w-md shadow-md rounded-lg border border-gray-200 focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition"
         />
       </div>
-
-      {/* Filters & Sorters Card */}
-      <div className="flex flex-wrap justify-between items-center gap-6 p-4 bg-white rounded-xl shadow-lg border border-gray-100">
-        {/* Sorters */}
-        <div className="flex flex-col items-center justify-center pl-6 pr-8">
-          <label className="text-base font-semibold text-blue-700 mb-2 self-center tracking-wide">
-            Sort
-          </label>
-          <div className="w-40">
-            <PostSortSelect
-              sortField={sortField}
-              sortOrder={sortOrder}
-              onSortFieldChange={onSortFieldChange}
-              onSortOrderChange={onSortOrderChange}
-            />
-          </div>
-        </div>
-
-        {/* Filters */}
-        <div className="flex gap-6">
-          <div className="flex flex-col min-w-[170px]">
-            <label className="text-base font-semibold text-purple-500 mb-2">
-              Sentiment
-            </label>
-            <Select value={sentimentFilter} onChange={(e) => onSentimentChange(e.target.value)}>
-              <SelectItem value="all">All</SelectItem>
-              <SelectItem value="BULLISH">Bullish</SelectItem>
-              <SelectItem value="NEUTRAL">Neutral</SelectItem>
-              <SelectItem value="BEARISH">Bearish</SelectItem>
-            </Select>
-          </div>
-
-          <div className="flex flex-col min-w-[170px]">
-            <label className="text-base font-semibold text-purple-500 mb-2">
-              Source
-            </label>
-            <Select
-              value={sourceFilter}
-              onChange={(e) => onSourceChange(e.target.value)}
-            >
-              <SelectItem value="all">All Sources</SelectItem>
-              <SelectItem value="REDDIT">Reddit</SelectItem>
-              <SelectItem value="TWITTER">Twitter</SelectItem>
-              <SelectItem value="YOUTUBE">YouTube</SelectItem>
-              <SelectItem value="TELEGRAM">Telegram</SelectItem>
-              <SelectItem value="FARCASTER">Farcaster</SelectItem>
-            </Select>
-          </div>
-        </div>
-      </div>
     </div>
   );
 }
diff --git a/src/components/PostComponents/PostsList.tsx b/src/components/PostComponents/PostsList.tsx
index d776ed6..159f2ab 100644
--- a/src/components/PostComponents/PostsList.tsx
+++ b/src/components/PostComponents/PostsList.tsx
@@ -96,69 +96,12 @@ export default function PostsList() {
   }, [hasMore, loading, nextCursor, fetchPosts]);
 
   return (
-    <>
-      <div className="mt-8">
-        <PostFilters
-          search={search}
-          onSearchChange={onChangeHandler}
-          sortField={sortField}
-          sortOrder={sortOrder}
-          onSortFieldChange={setSortField}
-          onSortOrderChange={setSortOrder}
-          sentimentFilter={sentimentFilter}
-          onSentimentChange={setSentimentFilter}
-          sourceFilter={sourceFilter}
-          onSourceChange={setSourceFilter}
-        />
-      </div>
-
-      {!loading && !error && info.length > 0 && (
-        <SentimentBar
-          info={info.filter(
-            (post) =>
-              (sentimentFilter === "all" ||
-                post.sentiment === sentimentFilter) &&
-              (sourceFilter === "all" || post.source === sourceFilter)
-          )}
-        />
-      )}
-
-      {error && <div className="text-destructive text-center">{error}</div>}
-
-      {loading && (
-        <div className="py-8 flex justify-center">
-          <Spinner label="Loading posts" />
-        </div>
-      )}
-
-      {!loading && !error && !info.length && (
-        <div className="text-destructive text-center">No Posts Found</div>
-      )}
-
-      {!loading && !error && info.length > 0 && (
-        <div className="flex flex-col gap-4 items-center">
-          {info
-            .filter(
-              (post) =>
-                (sentimentFilter === "all" ||
-                  post.sentiment === sentimentFilter) &&
-                (sourceFilter === "all" || post.source === sourceFilter)
-            )
-            .map((post: Post) => (
-              <PostCard key={post.id} post={post} />
-            ))}
-          {/* Infinite scroll trigger */}
-          {hasMore && (
-            <div ref={loadMoreRef} className="py-4">
-              {loadingMore ? (
-                <Spinner label="Loading more posts" />
-              ) : (
-                <span>Loading more...</span>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-    </>
+    <div className="mt-8">
+      <PostFilters
+        search={search}
+        onSearchChange={onChangeHandler}
+      />
+      <PostCard/>
+    </div>
   );
 }

From a923786e7fa0b8ee51bdc7bd94f55cd48ee9aa5c Mon Sep 17 00:00:00 2001
From: Simon Smilga <simon0x1800@gmail.com>
Date: Mon, 15 Sep 2025 10:55:48 -0600
Subject: [PATCH 2/3] feat: Refactor PostCard component to streamline source
 handling and enhance category/subcategory display

---
 src/components/PostComponents/PostCard.tsx | 101 +++++++++++----------
 1 file changed, 55 insertions(+), 46 deletions(-)

diff --git a/src/components/PostComponents/PostCard.tsx b/src/components/PostComponents/PostCard.tsx
index fb7e5b0..fdc7542 100644
--- a/src/components/PostComponents/PostCard.tsx
+++ b/src/components/PostComponents/PostCard.tsx
@@ -8,9 +8,7 @@ import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
 
 type Source = {
   name: string;
-  icon: React.ReactNode;
   count: number;
-  color: string;
 };
 
 type PostData = {
@@ -21,7 +19,7 @@ type PostData = {
   postCount: number;
   sources: Source[];
   categories: string[];
-  extraTags?: string;
+  subcategories?: string[];
 };
 
 // Mock data array
@@ -36,25 +34,19 @@ const mockPostsData: PostData[] = [
     sources: [
       {
         name: "Twitter",
-        icon: <FaTwitter className="w-2 h-2" />,
         count: 12,
-        color: "text-blue-500",
       },
       {
         name: "LinkedIn",
-        icon: <FaLinkedin className="w-2 h-2" />,
         count: 8,
-        color: "text-blue-600",
       },
       {
         name: "Reddit",
-        icon: <FaReddit className="w-2 h-2" />,
         count: 4,
-        color: "text-orange-600",
       },
     ],
-    categories: ["Bitcoin", "Institutional", "adoption"],
-    extraTags: "+1",
+    categories: ["Bitcoin", "Institutional"],
+    subcategories: ["ETF", "Regulation", "Spot", "Futures"],
   },
   {
     title: "Ethereum DeFi Protocol Updates",
@@ -66,19 +58,15 @@ const mockPostsData: PostData[] = [
     sources: [
       {
         name: "Twitter",
-        icon: <FaTwitter className="w-2 h-2" />,
         count: 10,
-        color: "text-blue-500",
       },
       {
         name: "Reddit",
-        icon: <FaReddit className="w-2 h-2" />,
         count: 8,
-        color: "text-orange-600",
       },
     ],
-    categories: ["Ethereum", "DeFi", "Protocol"],
-    extraTags: "+2",
+    categories: ["Ethereum"],
+    subcategories: ["Lending", "DEX", "Staking", "Yield", "Bridge"],
   },
   {
     title: "Market Volatility Analysis",
@@ -90,19 +78,15 @@ const mockPostsData: PostData[] = [
     sources: [
       {
         name: "LinkedIn",
-        icon: <FaLinkedin className="w-2 h-2" />,
         count: 15,
-        color: "text-blue-600",
       },
       {
         name: "Reddit",
-        icon: <FaReddit className="w-2 h-2" />,
         count: 17,
-        color: "text-orange-600",
       },
     ],
-    categories: ["Market", "Volatility", "Analysis"],
-    extraTags: "+3",
+    categories: ["Market", "Volatility"],
+    subcategories: ["Crash", "Recovery", "Bear", "Bull"],
   },
 ];
 
@@ -121,7 +105,7 @@ export function SinglePostCard({ post }: { post: PostData }) {
       : "text-gray-700 bg-gray-100";
 
   return (
-    <Card className="w-54 h-60 font-sans">
+    <Card className="w-54 h-66 font-sans">
       <CardHeader className="p-2">
         <CardTitle className="text-[10px] font-semibold leading-tight mb-1">
           {post.title}
@@ -168,16 +152,22 @@ export function SinglePostCard({ post }: { post: PostData }) {
           {post.sources.map((src, idx) => {
             let pillClass =
               "px-2 py-0.5 rounded-full flex items-center gap-1 border text-[9px] font-medium";
-            if (src.name === "Twitter")
+            let icon = null;
+            if (src.name === "Twitter") {
               pillClass += " bg-blue-50 text-blue-600 border-blue-200";
-            else if (src.name === "LinkedIn")
+              icon = <FaTwitter className="w-2 h-2" />;
+            } else if (src.name === "LinkedIn") {
               pillClass += " bg-blue-50 text-blue-600 border-blue-200";
-            else if (src.name === "Reddit")
+              icon = <FaLinkedin className="w-2 h-2" />;
+            } else if (src.name === "Reddit") {
               pillClass += " bg-orange-50 text-orange-600 border-orange-200";
-            else pillClass += " bg-gray-50 text-gray-600 border-gray-200";
+              icon = <FaReddit className="w-2 h-2" />;
+            } else {
+              pillClass += " bg-gray-50 text-gray-600 border-gray-200";
+            }
             return (
               <span key={src.name + idx} className={pillClass}>
-                {src.icon}
+                {icon}
                 {src.name} <span className="font-semibold">({src.count})</span>
               </span>
             );
@@ -186,23 +176,42 @@ export function SinglePostCard({ post }: { post: PostData }) {
 
         {/* Category/Subcategory Tags */}
         <div className="flex flex-wrap gap-0.5">
-          {post.categories.map((cat, idx) => (
-            <span
-              key={cat + idx}
-              className={`px-1 py-0.5 text-[7px] font-medium ${
-                idx === 0
-                  ? "text-white bg-blue-500"
-                  : "text-blue-700 bg-blue-100"
-              } rounded-full`}
-            >
-              #{cat}
-            </span>
-          ))}
-          {post.extraTags && (
-            <span className="text-[7px] text-gray-500 px-1 py-0.5">
-              {post.extraTags}
-            </span>
-          )}
+          {(() => {
+            const allTags = [
+              ...post.categories.map((cat) => ({
+                type: "category",
+                value: cat,
+              })),
+              ...(post.subcategories || []).map((subcat) => ({
+                type: "subcategory",
+                value: subcat,
+              })),
+            ];
+            const visibleTags = allTags.slice(0, 5);
+            const remainingCount = allTags.length - 5;
+
+            return (
+              <>
+                {visibleTags.map((tag, idx) => (
+                  <span
+                    key={tag.value + idx}
+                    className={`px-1 py-0.5 text-[7px] font-medium rounded-full ${
+                      tag.type === "category"
+                        ? "text-white bg-blue-500"
+                        : "text-blue-700 border border-blue-500 bg-transparent"
+                    }`}
+                  >
+                    #{tag.value}
+                  </span>
+                ))}
+                {remainingCount > 0 && (
+                  <span className="px-1 py-0.5 text-[7px] font-medium text-gray-700 bg-gray-100 rounded-full">
+                    +{remainingCount} more
+                  </span>
+                )}
+              </>
+            );
+          })()}
         </div>
       </CardHeader>
     </Card>

From 653ac075320fbad7eba8285271eb92150a61564f Mon Sep 17 00:00:00 2001
From: Simon Smilga <simon0x1800@gmail.com>
Date: Mon, 15 Sep 2025 11:15:01 -0600
Subject: [PATCH 3/3] feat: Add PostGallery and TagRenderer components for
 enhanced post display and categorization

---
 .../{PostCard.tsx => PostGallery.tsx}         | 81 +++++--------------
 src/components/PostComponents/PostsList.tsx   |  4 +-
 src/components/PostComponents/TagRenderer.tsx | 49 +++++++++++
 3 files changed, 73 insertions(+), 61 deletions(-)
 rename src/components/PostComponents/{PostCard.tsx => PostGallery.tsx} (72%)
 create mode 100644 src/components/PostComponents/TagRenderer.tsx

diff --git a/src/components/PostComponents/PostCard.tsx b/src/components/PostComponents/PostGallery.tsx
similarity index 72%
rename from src/components/PostComponents/PostCard.tsx
rename to src/components/PostComponents/PostGallery.tsx
index fdc7542..13fc099 100644
--- a/src/components/PostComponents/PostCard.tsx
+++ b/src/components/PostComponents/PostGallery.tsx
@@ -5,6 +5,8 @@ import { CiChat1 } from "react-icons/ci";
 import { FaTwitter, FaLinkedin, FaReddit } from "react-icons/fa";
 
 import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
+import TagRenderer from "./TagRenderer";
+import { Sentiment } from "@prisma/client";
 
 type Source = {
   name: string;
@@ -14,7 +16,7 @@ type Source = {
 type PostData = {
   title: string;
   description: string;
-  sentiment: "Bullish" | "Bearish" | "Neutral";
+  sentiment: Sentiment;
   sentimentBar: { bullish: number; neutral: number; bearish: number };
   postCount: number;
   sources: Source[];
@@ -28,7 +30,7 @@ const mockPostsData: PostData[] = [
     title: "Bitcoin Institutional Adoption & Market Sentiment",
     description:
       "Major financial institutions showing increased interest in Bitcoin with positive analyst reports...",
-    sentiment: "Bullish",
+    sentiment: "BULLISH",
     sentimentBar: { bullish: 60, neutral: 25, bearish: 15 },
     postCount: 24,
     sources: [
@@ -52,7 +54,7 @@ const mockPostsData: PostData[] = [
     title: "Ethereum DeFi Protocol Updates",
     description:
       "New developments in decentralized finance protocols showing promising growth patterns...",
-    sentiment: "Neutral",
+    sentiment: "NEUTRAL",
     sentimentBar: { bullish: 30, neutral: 50, bearish: 20 },
     postCount: 18,
     sources: [
@@ -72,7 +74,7 @@ const mockPostsData: PostData[] = [
     title: "Market Volatility Analysis",
     description:
       "Recent market downturn showing concerning trends across major cryptocurrencies...",
-    sentiment: "Bearish",
+    sentiment: "BEARISH",
     sentimentBar: { bullish: 15, neutral: 25, bearish: 60 },
     postCount: 32,
     sources: [
@@ -90,17 +92,16 @@ const mockPostsData: PostData[] = [
   },
 ];
 
-type PostCardProps = {
+type PostsGalleryProps = {
   posts?: PostData[];
-  showMultiple?: boolean;
 };
 
 // Single card component
 export function SinglePostCard({ post }: { post: PostData }) {
   const sentimentColor =
-    post.sentiment === "Bullish"
+    post.sentiment === "BULLISH"
       ? "text-green-700 bg-green-100"
-      : post.sentiment === "Bearish"
+      : post.sentiment === "BEARISH"
       ? "text-red-700 bg-red-100"
       : "text-gray-700 bg-gray-100";
 
@@ -176,62 +177,24 @@ export function SinglePostCard({ post }: { post: PostData }) {
 
         {/* Category/Subcategory Tags */}
         <div className="flex flex-wrap gap-0.5">
-          {(() => {
-            const allTags = [
-              ...post.categories.map((cat) => ({
-                type: "category",
-                value: cat,
-              })),
-              ...(post.subcategories || []).map((subcat) => ({
-                type: "subcategory",
-                value: subcat,
-              })),
-            ];
-            const visibleTags = allTags.slice(0, 5);
-            const remainingCount = allTags.length - 5;
-
-            return (
-              <>
-                {visibleTags.map((tag, idx) => (
-                  <span
-                    key={tag.value + idx}
-                    className={`px-1 py-0.5 text-[7px] font-medium rounded-full ${
-                      tag.type === "category"
-                        ? "text-white bg-blue-500"
-                        : "text-blue-700 border border-blue-500 bg-transparent"
-                    }`}
-                  >
-                    #{tag.value}
-                  </span>
-                ))}
-                {remainingCount > 0 && (
-                  <span className="px-1 py-0.5 text-[7px] font-medium text-gray-700 bg-gray-100 rounded-full">
-                    +{remainingCount} more
-                  </span>
-                )}
-              </>
-            );
-          })()}
+          <TagRenderer
+            categories={post.categories}
+            subcategories={post.subcategories}
+          />
         </div>
       </CardHeader>
     </Card>
   );
 }
 
-export default function PostCard({
+export default function PostsGallery({
   posts = mockPostsData,
-  showMultiple = true,
-}: PostCardProps) {
-  if (showMultiple) {
-    return (
-      <div className="flex flex-row justify-center gap-6 p-2">
-        {posts.map((post, index) => (
-          <SinglePostCard key={index} post={post} />
-        ))}
-      </div>
-    );
-  }
-
-  // Show only the first card if showMultiple is false
-  return <SinglePostCard post={posts[0]} />;
+}: PostsGalleryProps) {
+  return (
+    <div className="flex flex-row justify-center gap-6 p-2">
+      {posts.map((post, index) => (
+        <SinglePostCard key={index} post={post} />
+      ))}
+    </div>
+  );
 }
diff --git a/src/components/PostComponents/PostsList.tsx b/src/components/PostComponents/PostsList.tsx
index 159f2ab..ec1e560 100644
--- a/src/components/PostComponents/PostsList.tsx
+++ b/src/components/PostComponents/PostsList.tsx
@@ -1,11 +1,11 @@
 "use client";
 import { useEffect, useState, useRef, useCallback } from "react";
-import PostCard from "./PostCard";
 import SentimentBar from "./SentimentBar";
 import PostFilters from "./PostFilters";
 import { SortField, SortOrder } from "./PostSortSelect";
 import Spinner from "./Spinner";
 import type { Post } from "@prisma/client";
+import PostGallery from "./PostGallery";
 
 export default function PostsList() {
   const [error, setError] = useState<string | null>(null);
@@ -101,7 +101,7 @@ export default function PostsList() {
         search={search}
         onSearchChange={onChangeHandler}
       />
-      <PostCard/>
+      <PostGallery/>
     </div>
   );
 }
diff --git a/src/components/PostComponents/TagRenderer.tsx b/src/components/PostComponents/TagRenderer.tsx
new file mode 100644
index 0000000..03f76cf
--- /dev/null
+++ b/src/components/PostComponents/TagRenderer.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+
+type Tag = {
+  type: "category" | "subcategory";
+  value: string;
+};
+
+type TagRendererProps = {
+  categories: string[];
+  subcategories?: string[];
+};
+
+export default function TagRenderer({
+  categories,
+  subcategories,
+}: TagRendererProps) {
+  const allTags: Tag[] = [
+    ...categories.map((cat) => ({ type: "category" as const, value: cat })),
+    ...(subcategories || []).map((subcat) => ({
+      type: "subcategory" as const,
+      value: subcat,
+    })),
+  ];
+
+  const visibleTags = allTags.slice(0, 5);
+  const remainingCount = allTags.length - 5;
+
+  return (
+    <>
+      {visibleTags.map((tag, idx) => (
+        <span
+          key={tag.value + idx}
+          className={`px-1 py-0.5 text-[7px] font-medium rounded-full ${
+            tag.type === "category"
+              ? "text-white bg-blue-500"
+              : "text-blue-700 border border-blue-500 bg-transparent"
+          }`}
+        >
+          #{tag.value}
+        </span>
+      ))}
+      {remainingCount > 0 && (
+        <span className="px-1 py-0.5 text-[7px] font-medium text-gray-700 bg-gray-100 rounded-full">
+          +{remainingCount} more
+        </span>
+      )}
+    </>
+  );
+}