71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import {ReactNode} from 'react'
|
||
import Link from 'next/link'
|
||
import {PageSection} from './page-section'
|
||
import {BookOpen, Smartphone, HelpCircle} from 'lucide-react'
|
||
|
||
export function ArticlesSection() {
|
||
return (
|
||
<PageSection title="推荐文章">
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<ArticleCard
|
||
icon={<BookOpen className="w-12 h-12"/>}
|
||
title="浏览器设置代理教程"
|
||
description="快速上手，5分钟学会在浏览器中配置代理服务器"
|
||
href="/docs/browser-proxy"
|
||
/>
|
||
|
||
<ArticleCard
|
||
icon={<Smartphone className="w-12 h-12"/>}
|
||
title="Windows10 代理配置"
|
||
description="详细图文教程，帮助你在 Windows 系统中设置代理"
|
||
href="/docs/windows10-proxy"
|
||
/>
|
||
|
||
<ArticleCard
|
||
icon={<HelpCircle className="w-12 h-12"/>}
|
||
title="常见问题总览"
|
||
description="解决使用过程中遇到的各类问题，快速找到答案"
|
||
href="/docs/faq-general"
|
||
/>
|
||
</div>
|
||
</PageSection>
|
||
)
|
||
}
|
||
|
||
function ArticleCard(props: {
|
||
icon: ReactNode
|
||
title: string
|
||
description: string
|
||
href: string
|
||
}) {
|
||
return (
|
||
<Link
|
||
href={props.href}
|
||
className={[
|
||
`group block p-8 shadow-[4px_4px_20px_4px] shadow-blue-50 rounded-lg bg-white`,
|
||
`transition-all duration-200`,
|
||
].join(' ')}
|
||
>
|
||
<div className="flex flex-col items-center text-center gap-6">
|
||
<div className="p-4 rounded-xl bg-linear-to-br from-blue-500 to-cyan-400 text-white group-hover:scale-110 transition-transform">
|
||
{props.icon}
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-xl font-semibold mb-3 group-hover:text-blue-600 transition-colors">
|
||
{props.title}
|
||
</h3>
|
||
<p className="text-gray-500 text-sm leading-relaxed">
|
||
{props.description}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-2 text-blue-500 text-sm flex items-center gap-2 group-hover:gap-3 transition-all">
|
||
<span>了解更多</span>
|
||
<span className="text-lg">→</span>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
)
|
||
}
|