55 lines
2.3 KiB
JavaScript
55 lines
2.3 KiB
JavaScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
/**
|
|
* 列表页模板组件
|
|
* @param {Object[]} items - 列表数据，需包含 title, image, content, slug 字段
|
|
* @param {string} basePath - 详情页基础路径
|
|
*/
|
|
export default function ListPageTemplate({ items, basePath = "" }) {
|
|
return (
|
|
<section className="py-12 bg-white">
|
|
<div className="max-w-5xl mx-auto px-4">
|
|
<div className="space-y-10">
|
|
{items.map((item) => (
|
|
<div
|
|
key={item.slug}
|
|
className="flex flex-col md:flex-row items-center md:items-start gap-8 p-8 rounded-2xl shadow-lg bg-gray-50 hover:shadow-2xl transition-shadow"
|
|
>
|
|
<div className="flex-shrink-0 w-full md:w-56 h-40 relative overflow-hidden rounded-lg bg-gray-50">
|
|
{item.image && (
|
|
<Image
|
|
src={item.image}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover object-center transition-transform duration-300 hover:scale-105"
|
|
sizes="(max-width: 768px) 100vw, 224px"
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 w-full">
|
|
<h2 className="!text-base mb-2 text-gray-900">
|
|
<Link
|
|
href={`${basePath}/${item.slug}`}
|
|
className="!text-[#343f52] transition-colors hover:text-green-600 hover:!text-[#22b573]"
|
|
>
|
|
{item.title}
|
|
</Link>
|
|
</h2>
|
|
<p className="text-gray-600 text-base mb-4 line-clamp-3">
|
|
{item.content?.replace(/<[^>]+>/g, "").slice(0, 100)}{item.content?.replace(/<[^>]+>/g, "").length > 100 ? "..." : ""}
|
|
</p>
|
|
<Link
|
|
href={`${basePath}/${item.slug}`}
|
|
className="!text-[#343f52] inline-block px-6 py-2 bg-gradient-to-r from-green-400 to-green-600 text-white rounded-full font-semibold shadow hover:from-green-500 hover:to-green-700 transition-all !text-base hover:!text-[#22b573]"
|
|
>
|
|
More
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|