56 lines
2.3 KiB
TypeScript
56 lines
2.3 KiB
TypeScript
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>
|
||
);
|
||
}
|