2025.11.27.17.50

src/components/home/Sidebar.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import Link from 'next/link';
+
+interface SidebarProps {
+    tags: any[];
+}
+
+export default function Sidebar({ tags }: SidebarProps) {
+    return (
+        <div className="space-y-8">
+            {/* Hot Tags */}
+            <div>
+                <h3 className="font-bold text-gray-900 mb-4 flex items-center gap-2">
+                    <span className="w-1 h-4 bg-primary rounded-full"></span>
+                    热门标签
+                </h3>
+                <div className="flex flex-wrap gap-2">
+                    {tags.map((tag) => (
+                        <Link key={tag._id} href={`/?tag=${tag._id}`}>
+                            <Badge variant="secondary" className="hover:bg-gray-200 cursor-pointer font-normal px-3 py-1">
+                                {tag.标签名称}
+                            </Badge>
+                        </Link>
+                    ))}
+                </div>
+            </div>
+
+            {/* Recommended (Static for now) */}
+            <div>
+                <h3 className="font-bold text-gray-900 mb-4 flex items-center gap-2">
+                    <span className="w-1 h-4 bg-primary rounded-full"></span>
+                    推荐阅读
+                </h3>
+                <div className="space-y-4">
+                    {[1, 2, 3].map((i) => (
+                        <div key={i} className="group cursor-pointer">
+                            <div className="flex items-start gap-3">
+                                <span className={`text-2xl font-bold transition-colors ${i === 1 ? 'text-gray-900' :
+                                        i === 2 ? 'text-gray-500' :
+                                            'text-gray-300'
+                                    }`}>0{i}</span>
+                                <div>
+                                    <h4 className="text-sm font-medium text-gray-900 group-hover:text-primary transition-colors line-clamp-2">
+                                        2025年前端架构演进：从 Micro-Frontends 到 Islands Architecture
+                                    </h4>
+                                    <p className="text-xs text-gray-400 mt-1">12 min read</p>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}