memorium/components/Image.tsx

import { asset } from "$fresh/runtime.ts";
import * as CSS from "https://esm.sh/csstype@3.1.2";
import { isLocalImage } from "@lib/string.ts";

interface ResponsiveAttributes {
  srcset: string;
  sizes: string;
}

function generateResponsiveAttributes(
  imageUrl: string,
  widths: number[],
  baseApiUrl: string,
  sizes = "100vw",
): ResponsiveAttributes {
  const srcsets: string[] = [];

  for (const width of widths) {
    const apiUrl = `${baseApiUrl}?image=${imageUrl}&width=${width}`;
    srcsets.push(`${apiUrl} ${width}w`);
  }

  const srcset = srcsets.join(", ");

  return {
    srcset,
    sizes,
  };
}

const widths = [320, 640, 960, 1280]; // List of widths for srcset

const Image = (
  props: {
    class: string;
    src: string;
    alt?: string;
    thumbnail?: string;
    width?: number | string;
    height?: number | string;
    style?: CSS.HtmlAttributes;
  },
) => {
  const responsiveAttributes: ResponsiveAttributes = isLocalImage(props.src)
    ? generateResponsiveAttributes(props.src, widths, "/api/images")
    : { srcset: "", sizes: "" };

  return (
    <span
      style={{
        position: "absolute",
        width: "100%",
        height: "100%",
        zIndex: -1,
      }}
      data-thumb={props.thumbnail}
    >
      <img
        data-thumb={props.thumbnail}
        data-thumb-img
        loading="lazy"
        alt={props.alt}
        style={props.style}
        srcset={responsiveAttributes.srcset}
        sizes={responsiveAttributes.sizes}
        src={asset(props.src)}
        width={props.width}
        height={props.height}
        class={props.class}
      />
    </span>
  );
};

export default Image;