196 lines
9.8 KiB
TypeScript
196 lines
9.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Navigation from '../../../components/Navigation';
|
|
import Footer from '../../../components/Footer';
|
|
import { useLanguage } from '../../../hooks/useLanguage';
|
|
import Link from 'next/link';
|
|
|
|
interface NewsPageProps {
|
|
params: {
|
|
lang: string;
|
|
};
|
|
}
|
|
|
|
export default function NewsPage({ params }: NewsPageProps) {
|
|
const { currentLang, setCurrentLang, currentContent, createLocalizedPath } = useLanguage(
|
|
params.lang,
|
|
);
|
|
const [selectedCategory, setSelectedCategory] = useState('all');
|
|
|
|
const filteredArticles =
|
|
selectedCategory === 'all'
|
|
? currentContent.news.articles
|
|
: currentContent.news.articles.filter(
|
|
(article) => article.category === selectedCategory,
|
|
);
|
|
|
|
const getCategoryColor = (category: string) => {
|
|
const colors: Record<string, string> = {
|
|
industry: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
|
|
technology: 'bg-green-500/20 text-green-400 border-green-500/30',
|
|
company: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
|
|
case: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
|
|
};
|
|
return colors[category] ?? 'bg-gray-500/20 text-gray-400 border-gray-500/30';
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-900 text-white">
|
|
<Navigation
|
|
currentLang={currentLang}
|
|
setCurrentLang={setCurrentLang}
|
|
content={currentContent}
|
|
createLocalizedPath={createLocalizedPath}
|
|
/>
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative z-10 px-6 py-20">
|
|
<div className="max-w-7xl mx-auto text-center">
|
|
<h1 className="text-4xl md:text-6xl font-bold mb-8 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
|
{currentContent.news.title}
|
|
</h1>
|
|
<p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
|
|
{currentContent.news.subtitle}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Category Filter */}
|
|
<section className="relative z-10 px-6 py-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex flex-wrap justify-center gap-4 mb-12">
|
|
{Object.entries(currentContent.news.categories).map(([key, label]) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => setSelectedCategory(key)}
|
|
className={`px-6 py-3 rounded-full border transition-all duration-300 ${
|
|
selectedCategory === key
|
|
? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50'
|
|
: 'bg-gray-800/50 text-gray-400 border-gray-600/50 hover:border-cyan-500/30 hover:text-cyan-400'
|
|
}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Articles Grid */}
|
|
<section className="relative z-10 px-6 py-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{filteredArticles.map((article) => (
|
|
<article
|
|
key={article.id}
|
|
className="bg-gray-800/50 backdrop-blur-sm rounded-xl overflow-hidden border border-cyan-500/20 hover:border-cyan-400/50 transition-all duration-300 group"
|
|
>
|
|
{/* Article Image */}
|
|
<div className="relative h-48 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/50 to-transparent" />
|
|
|
|
<div className="absolute top-4 left-4">
|
|
<span
|
|
className={`px-3 py-1 rounded-full text-xs font-medium border ${getCategoryColor(article.category)}`}
|
|
>
|
|
{currentContent.news.categories[article.category]}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Article Content */}
|
|
<div className="p-6">
|
|
<div className="flex items-center text-sm text-gray-400 mb-3">
|
|
<span>{article.author}</span>
|
|
<span className="mx-2">•</span>
|
|
<span>{article.date}</span>
|
|
<span className="mx-2">•</span>
|
|
<span>{article.readTime}</span>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-bold mb-3 text-white group-hover:text-cyan-400 transition-colors line-clamp-2">
|
|
<Link href={createLocalizedPath(`/news/${article.id}`)}>
|
|
{article.title}
|
|
</Link>
|
|
</h3>
|
|
|
|
<p className="text-gray-300 mb-4 line-clamp-3 leading-relaxed">
|
|
{article.summary}
|
|
</p>
|
|
|
|
{/* Tags */}
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{article.tags.map((tag, index) => (
|
|
<span
|
|
key={index}
|
|
className="px-2 py-1 bg-gray-700/50 text-gray-400 text-xs rounded-md"
|
|
>
|
|
#{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
<Link
|
|
href={createLocalizedPath(`/news/${article.id}`)}
|
|
className="inline-flex items-center text-cyan-400 hover:text-cyan-300 transition-colors group"
|
|
>
|
|
阅读更多
|
|
<svg
|
|
className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 5l7 7-7 7"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
{/* Load More Button */}
|
|
{filteredArticles.length > 6 && (
|
|
<div className="text-center mt-12">
|
|
<button className="px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-semibold hover:from-cyan-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-105">
|
|
加载更多
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Newsletter Subscription */}
|
|
<section className="relative z-10 px-6 py-20 bg-gray-800/30">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
|
订阅我们的资讯
|
|
</h2>
|
|
<p className="text-xl text-gray-300 mb-8">
|
|
第一时间获取云计算行业最新动态和技术资讯
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto">
|
|
<input
|
|
type="email"
|
|
placeholder="输入您的邮箱地址"
|
|
className="flex-1 px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:border-cyan-400 transition-colors"
|
|
/>
|
|
|
|
<button className="px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-semibold hover:from-cyan-400 hover:to-blue-500 transition-all duration-300">
|
|
订阅
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer content={currentContent} createLocalizedPath={createLocalizedPath} />
|
|
</div>
|
|
);
|
|
}
|