Spaces:
Paused
Paused
File size: 1,351 Bytes
054d282 b44cd96 054d282 b44cd96 054d282 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import Link from "next/link";
import PaginationButtons from "./PaginationButtons";
export default function ImageSearchResults({ results }) {
return (
<div className="sm:pb-24 pb-40 mt-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 px-3 space-x-4">
{results.items.map((result) => (
<div key={result.link} className="mb-8">
<div className="group">
<Link href={result.image.contextLink}>
<img
src={result.link}
alt={result.title}
className="h-60 group-hover:shadow-xl w-full object-contain transition-shadow"
/>
</Link>
<Link rel="noopener noreferrer" target="_blank" href={result.image.contextLink}>
<h2 className="group-hover:underline truncate text-xl">
{result.title}
</h2>
</Link>
<Link rel="noopener noreferrer" target="_blank" href={result.image.contextLink}>
<p className="group-hover:underline text-gray-600">
{result.displayLink}
</p>
</Link>
</div>
</div>
))}
</div>
<div className="ml-16">
<PaginationButtons />
</div>
</div>
);
}
|