semantic-image-search-web/src/components/Modal.jsx

"use client";

import Image from "./Image";
import { downloadImage } from "../utils.js";

export function Modal({ currentImage, setCurrentImage }) {
  const photo_url = currentImage
    ? `https://unsplash.com/photos/${currentImage.id}`
    : null;
  const photo_image_url = currentImage
    ? `https://images.unsplash.com/${currentImage.url}?auto=format&fit=crop&w=480&q=80`
    : null;
  return (
    <div
      className="fixed inset-0 z-30 backdrop-blur-2xl w-full h-full bg-black top-0 left-0 transition"
      style={{
        backgroundColor: `rgba(0, 0, 0, ${currentImage ? 0.8 : 0})`,
        opacity: currentImage ? 1 : 0,
        pointerEvents: currentImage ? "auto" : "none",
      }}
    >
      {currentImage && (
        <>
          <Image
            alt=""
            className="transform rounded-lg transition will-change-auto"
            style={{ transform: "translate3d(0, 0, 0)" }}
            objectFit="contain"
            src={photo_image_url}
          />
          <div className="absolute top-0 left-0 flex items-center gap-2 p-3 text-white">
            <button
              onClick={() => setCurrentImage(null)}
              className="rounded-full bg-black/50 p-2 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white cursor-pointer"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                aria-hidden="true"
                className="h-5 w-5"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M6 18L18 6M6 6l12 12"
                ></path>
              </svg>
            </button>
          </div>
          <div className="absolute top-0 right-0 flex items-center gap-2 p-3 text-white">
            <a
              href={photo_url}
              className="rounded-full bg-black/50 p-2 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white"
              target="_blank"
              title="View on Unsplash"
              rel="noreferrer"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                aria-hidden="true"
                className="h-5 w-5"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
                ></path>
              </svg>
            </a>
            <button
              onClick={() =>
                downloadImage(photo_image_url, `${currentImage.id}.png`)
              }
              className="rounded-full bg-black/50 p-2 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white cursor-pointer"
              title="Download"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                aria-hidden="true"
                className="h-5 w-5"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
                ></path>
              </svg>
            </button>
          </div>
        </>
      )}
    </div>
  );
}