112 lines
4.7 KiB
TypeScript
112 lines
4.7 KiB
TypeScript
import Footer from "@/app/components/Footer";
|
|
import { blogPosts } from "@/app/data/mock";
|
|
|
|
export const metadata = {
|
|
title: "博客 | 游牧中国",
|
|
description: "阅读最新的数字游民资讯、城市攻略、签证指南和经验分享。",
|
|
};
|
|
|
|
export default function BlogPage() {
|
|
const featuredPost = blogPosts.find((post) => post.featured);
|
|
const regularPosts = blogPosts.filter((post) => !post.featured);
|
|
|
|
return (
|
|
<>
|
|
<main className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
|
|
<section className="max-w-6xl mx-auto px-4 sm:px-6 py-12 sm:py-16">
|
|
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-2">
|
|
<span className="w-1 h-10 bg-[#ff4d4f] rounded-full" />
|
|
博客
|
|
</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mb-10">
|
|
数字游民资讯、城市攻略、签证指南和经验分享
|
|
</p>
|
|
|
|
{/* Featured Post */}
|
|
{featuredPost && (
|
|
<div className="mb-12">
|
|
<div className="bg-white dark:bg-gray-900 rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow border border-gray-100 dark:border-gray-800">
|
|
<div className="grid md:grid-cols-2 gap-0">
|
|
<div className="aspect-video md:aspect-auto relative">
|
|
<img
|
|
src={featuredPost.coverImage}
|
|
alt={featuredPost.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<div className="p-6 sm:p-8 flex flex-col justify-center">
|
|
<span className="inline-block px-3 py-1 bg-[#ff4d4f]/10 text-[#ff4d4f] text-xs font-medium rounded-full mb-4 w-fit">
|
|
{featuredPost.category}
|
|
</span>
|
|
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">
|
|
{featuredPost.title}
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
|
|
{featuredPost.excerpt}
|
|
</p>
|
|
<div className="flex items-center gap-3 mt-auto">
|
|
<img
|
|
src={featuredPost.authorAvatar}
|
|
alt={featuredPost.author}
|
|
className="w-8 h-8 rounded-full"
|
|
/>
|
|
<div className="text-sm">
|
|
<span className="text-gray-900 dark:text-gray-100 font-medium">
|
|
{featuredPost.author}
|
|
</span>
|
|
<span className="text-gray-400 ml-2">
|
|
{featuredPost.date} · {featuredPost.readTime}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Regular Posts Grid */}
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{regularPosts.map((post) => (
|
|
<article
|
|
key={post.id}
|
|
className="bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow border border-gray-100 dark:border-gray-800"
|
|
>
|
|
<div className="aspect-video relative">
|
|
<img
|
|
src={post.coverImage}
|
|
alt={post.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<span className="absolute top-3 left-3 inline-block px-2 py-1 bg-black/50 text-white text-xs rounded-md backdrop-blur-sm">
|
|
{post.category}
|
|
</span>
|
|
</div>
|
|
<div className="p-4">
|
|
<h3 className="font-bold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
|
|
{post.title}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">
|
|
{post.excerpt}
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<img
|
|
src={post.authorAvatar}
|
|
alt={post.author}
|
|
className="w-6 h-6 rounded-full"
|
|
/>
|
|
<span className="text-xs text-gray-500">
|
|
{post.author} · {post.readTime}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|