31 lines
1.3 KiB
TypeScript
31 lines
1.3 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
|
||
type Case = { id: string; name: string; image: string; description: string };
|
||
|
||
export default function CaseList() {
|
||
const [cases, setCases] = useState<Case[]>([]);
|
||
useEffect(() => {
|
||
// TODO: 替换为实际 API 调用
|
||
setCases([
|
||
{ id: '1', name: '电商平台加速', image: '/cases/ecommerce.jpg', description: '帮助某大型电商客户降低页面加载时间30%...' },
|
||
{ id: '2', name: '游戏联机稳定', image: '/cases/gaming.jpg', description: '为游戏公司提供全球节点加速，延迟稳定在50ms以内...' },
|
||
]);
|
||
}, []);
|
||
|
||
return (
|
||
<section className="px-6 py-section bg-background">
|
||
<h2 className="text-3xl font-semibold mb-8">客户案例</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
{cases.map(item => (
|
||
<div key={item.id} className="bg-gray-50 rounded-lg overflow-hidden hover:shadow-lg">
|
||
<img src={item.image} alt={item.name} className="w-full h-48 object-cover" />
|
||
<div className="p-4">
|
||
<h3 className="text-xl font-medium mb-2">{item.name}</h3>
|
||
<p className="text-gray-700 text-sm">{item.description}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
);
|
||
} |