浏览代码

Border left by feed type

Update NewsCard to color left border based on feed category using getBorderColor; preserve pin/discovery overrides and maintain read-state styling.

X-Lovable-Edit-ID: edt-577ece7e-afc2-4c2f-a988-f9ef976708fc
gpt-engineer-app[bot] 2 周之前
父节点
当前提交
9b7f723ac9
共有 1 个文件被更改,包括 17 次插入2 次删除
  1. 17 2
      src/components/NewsCard.tsx

+ 17 - 2
src/components/NewsCard.tsx

@@ -62,6 +62,21 @@ const getSourceColor = (category: string) => {
   }
 };
 
+const getBorderColor = (category: string) => {
+  switch (category) {
+    case 'rss':
+      return 'border-l-blue-500';
+    case 'youtube':
+      return 'border-l-red-500';
+    case 'steam':
+      return 'border-l-gray-500';
+    case 'actualites':
+      return 'border-l-green-500';
+    default:
+      return 'border-l-blue-500';
+  }
+};
+
 const NewsCard = ({
   news,
   onTogglePin,
@@ -80,10 +95,10 @@ const NewsCard = ({
   return (
     <Card className={cn(
       "group hover:shadow-lg transition-all duration-300 border-l-4 cursor-pointer",
+      getBorderColor(news.category),
       news.isPinned && "border-l-yellow-500",
       isDiscoveryMode && "border-l-purple-500",
-      news.isRead && "opacity-75",
-      !news.isRead && !isDiscoveryMode && "border-l-primary"
+      news.isRead && "opacity-75"
     )}>
       <CardHeader className="space-y-3">
         <div className="flex items-start justify-between gap-4">