cambio-image-grid-demo

1"use client"
2 
3import { CambioImage } from "@/components/ui/cambio-image"
4 
5const images = [
6  {
7    src: "/images/stock/4d26c515-f5f1-43af-a9e5-e2be495ceddb.png",
8    alt: "Beautiful landscape photography",
9    width: 1170,
10    height: 600,
11  },
12  {
13    src: "/images/stock/2.png",
14    alt: "Image gallery example",
15    width: 400,
16    height: 300,
17  },
18  {
19    src: "/images/stock/3.png",
20    alt: "Image gallery example",
21    width: 400,
22    height: 300,
23  },
24  {
25    src: "/images/stock/4.png",
26    alt: "Image gallery example",
27    width: 400,
28    height: 300,
29  },
30]
31 
32export default function CambioImageGridDemo() {
33  return (
34    <div className="mx-auto w-full max-w-4xl p-6">
35      <div className="grid grid-cols-2 gap-x-2 gap-y-1">
36        {images.map((image, index) => (
37          <div key={index}>
38            <CambioImage
39              src={image.src}
40              alt={image.alt}
41              width={image.width}
42              height={image.height}
43              index={index}
44              motion="smooth"
45              className="h-full w-full object-cover"
46            />
47          </div>
48        ))}
49      </div>
50    </div>
51  )
52}