feat: add insight card component for tech insights section

2026-02-13 14:04:06 +08:00
parent 249da50335
commit a42f1f0a90
1 changed files with 82 additions and 0 deletions
@@ -0,0 +1,82 @@
+'use client';
+
+import { Calendar, Clock, ArrowRight } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+
+export interface InsightCardProps {
+  title: string;
+  excerpt: string;
+  category: string;
+  readTime: string;
+  publishedAt: string;
+  imageUrl?: string;
+  href: string;
+  featured?: boolean;
+}
+
+export function InsightCard({
+  title,
+  excerpt,
+  category,
+  readTime,
+  publishedAt,
+  imageUrl,
+  href,
+  featured = false,
+}: InsightCardProps) {
+  return (
+    <article
+      className={`
+        group relative overflow-hidden rounded-lg border border-[#E5E5E5]/50
+        bg-white transition-all duration-300 hover:shadow-lg
+        ${featured ? 'md:col-span-2' : ''}
+      `}
+    >
+      {imageUrl && (
+        <div className="relative h-48 overflow-hidden">
+          <img
+            src={imageUrl}
+            alt={title}
+            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
+        </div>
+      )}
+      
+      <div className="p-6">
+        <div className="flex items-center gap-3 mb-3">
+          <Badge variant="secondary" className="text-xs">
+            {category}
+          </Badge>
+          <div className="flex items-center gap-1 text-xs text-[#737373]">
+            <Clock className="w-3 h-3" />
+            <span>{readTime}</span>
+          </div>
+        </div>
+
+        <h3 className="text-lg font-semibold text-[#171717] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
+          {title}
+        </h3>
+
+        <p className="text-sm text-[#737373] mb-4 line-clamp-2">
+          {excerpt}
+        </p>
+
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-1 text-xs text-[#A3A3A3]">
+            <Calendar className="w-3 h-3" />
+            <span>{publishedAt}</span>
+          </div>
+
+          <a
+            href={href}
+            className="inline-flex items-center gap-1 text-sm font-medium text-[#C41E3A] hover:gap-2 transition-all"
+          >
+            阅读更多
+            <ArrowRight className="w-4 h-4" />
+          </a>
+        </div>
+      </div>
+    </article>
+  );
+}