Zoom Lightbox: Product Images

import { ZoomLightbox, ZoomLightboxItem } from "@/components/ui/zoom-lightbox";

const products = [
  { id: "1542291026-7eec264c27ff", width: 5472, height: 3648, name: "Ember Runner", color: "Crimson", price: "$140", tint: "bg-red-600" },
  { id: "1606107557195-0e29a4b5b4aa", width: 2400, height: 3000, name: "Volt Trainer", color: "Lime / Black", price: "$120", tint: "bg-lime-400" },
  { id: "1595950653106-6c9ebd614d3a", width: 4000, height: 6000, name: "Pastel Court", color: "Lilac / Mint", price: "$110", tint: "bg-violet-300" },
  { id: "1600185365483-26d7a4cc7519", width: 5000, height: 4000, name: "Coral Air", color: "Sail / Coral", price: "$150", tint: "bg-zinc-300" },
  { id: "1549298916-b41d501d3772", width: 5595, height: 3997, name: "Desert Low", color: "Wheat", price: "$130", tint: "bg-amber-500" },
  { id: "1608231387042-66d1773070a5", width: 9248, height: 6936, name: "Night Court", color: "White / Black", price: "$95", tint: "bg-zinc-900" },
];

const image = (id: string, width: number) =>
  `https://images.unsplash.com/photo-${id}?auto=format&fit=max&q=80&w=${width}`;

export function ZoomLightboxProductsDemo() {
  return (
    <section className="w-full max-w-3xl">
      <div className="mb-6 flex items-end justify-between gap-4">
        <div>
          <p className="font-mono text-xs uppercase tracking-widest text-zinc-500">Spring drop</p>
          <h3 className="mt-2 text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
            New arrivals
          </h3>
        </div>
        <p className="font-mono text-xs text-zinc-500 tabular-nums">{products.length} styles</p>
      </div>

      <ZoomLightbox className="grid grid-cols-2 gap-x-4 gap-y-6 sm:grid-cols-3">
        {products.map((product) => (
          <div key={product.id}>
            <ZoomLightboxItem
              src={image(product.id, 2000)}
              thumbnail={image(product.id, 600)}
              width={product.width}
              height={product.height}
              alt={`${product.name} sneaker in ${product.color}`}
              caption={`${product.name} · ${product.color} · ${product.price}`}
              className="aspect-[4/5] w-full rounded-2xl"
            />
            <div className="mt-3 flex items-start justify-between gap-3 px-0.5">
              <div className="min-w-0">
                <p className="truncate text-sm font-medium text-zinc-900 dark:text-zinc-50">
                  {product.name}
                </p>
                <p className="mt-0.5 flex items-center gap-1.5 text-xs text-zinc-500">
                  <span
                    aria-hidden
                    className={`size-2 rounded-full ring-1 ring-black/10 dark:ring-white/20 ${product.tint}`}
                  />
                  {product.color}
                </p>
              </div>
              <p className="text-sm text-zinc-900 tabular-nums dark:text-zinc-50">{product.price}</p>
            </div>
          </div>
        ))}
      </ZoomLightbox>
    </section>
  );
}