38 lines
814 B
TypeScript
38 lines
814 B
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
type PreviewItem = {
|
|
title: string;
|
|
image: string;
|
|
};
|
|
|
|
type props = {
|
|
items?: PreviewItem[];
|
|
};
|
|
|
|
function PreviewImage({ title, image }: PreviewItem) {
|
|
const [failed, setFailed] = useState(false);
|
|
|
|
if (failed) return null;
|
|
|
|
return (
|
|
<img
|
|
src={image}
|
|
alt={title}
|
|
className="w-full h-full object-cover rounded-xl"
|
|
onError={() => setFailed(true)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function ProjectPreviewGrid({ items = [] }: props) {
|
|
return (
|
|
<div className={`grid gap-4 ${items.length > 1 ? 'lg:grid-cols-2' : ''}`}>
|
|
{items.map((item) => (
|
|
<PreviewImage key={item.title} title={item.title} image={item.image} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|