84 lines
3.3 KiB
TypeScript
84 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { motion } from 'framer-motion'
|
|
import { Calendar, ArrowRight, Loader2 } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
|
|
type News = {
|
|
id: number
|
|
title: string
|
|
category: string
|
|
excerpt: string
|
|
createdAt: string
|
|
}
|
|
|
|
export function NewsSection() {
|
|
const [news, setNews] = useState<News[]>([])
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
fetch('/api/news?limit=3')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
setNews(data.news)
|
|
setIsLoading(false)
|
|
})
|
|
.catch(() => setIsLoading(false))
|
|
}, [])
|
|
|
|
return (
|
|
<section id="news" className="py-24 bg-white scroll-mt-20">
|
|
<div className="container mx-auto px-4 md:px-6">
|
|
<div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
|
|
<div>
|
|
<h2 className="text-3xl md:text-5xl font-black text-[#0A1931] mb-4">最新动态</h2>
|
|
<p className="text-gray-500 text-lg">了解白马家园的成长足迹与行业洞察</p>
|
|
</div>
|
|
<Link href="/news" className="text-[#FF6600] font-bold flex items-center gap-2 hover:translate-x-1 transition-transform">
|
|
查看全部动态 <ArrowRight className="w-5 h-5" />
|
|
</Link>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-20"><Loader2 className="w-8 h-8 animate-spin text-[#FF6600]" /></div>
|
|
) : news.length === 0 ? (
|
|
<div className="text-center py-20 text-gray-400 bg-gray-50 rounded-2xl">后台尚未发布任何动态</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{news.map((item, index) => (
|
|
<Link href={`/news?id=${item.id}`} key={item.id}>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: index * 0.1 }}
|
|
className="group p-6 rounded-2xl border border-gray-100 bg-white hover:shadow-xl transition-all cursor-pointer h-full"
|
|
>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<span className="text-[10px] font-black uppercase tracking-widest text-[#FF6600] bg-orange-50 px-2 py-0.5 rounded">
|
|
{item.category}
|
|
</span>
|
|
<span className="text-xs text-gray-400 flex items-center font-mono">
|
|
<Calendar className="w-3 h-3 mr-1" /> {new Date(item.createdAt).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-[#0A1931] mb-4 group-hover:text-[#FF6600] transition-colors line-clamp-2">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-sm text-gray-500 leading-relaxed mb-6 line-clamp-3">
|
|
{item.excerpt}
|
|
</p>
|
|
<span className="text-sm font-bold text-[#0A1931] flex items-center gap-1 group-hover:gap-2 transition-all">
|
|
阅读更多 <ArrowRight className="w-4 h-4" />
|
|
</span>
|
|
</motion.div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|