Next.js 撰寫選單時取得圖片型別

import React from "react";
import Image, { type StaticImageData } from "next/image";
import clsx from "clsx";

import image1 from "@public/images/featrue1.png";
import image2 from "@public/images/featrue2.png";
import image3 from "@public/images/featrue3.png";
import image4 from "@public/images/featrue4.png";

interface Option {
  src: StaticImageData;
  title: string;
  caption: string;
}

const options: Option[] = [
  {
    src: image1,
    title: "Professional",
    caption: ["When you are facing confusion,  "].join(" "),
  },
  {
    src: image2,
    title: "",
    caption: ["Have a problem  ?", "Come in for  "].join(" "),
  },
];

export default function Features() {
  return (
    <article className="grid grid-cols-1 lg:grid-cols-2">
      {options.map(_renderItem)}
    </article>
  );
}

function _renderItem(item: Option) {
  return (
    <section key={item.title} className="relative min-h-80">
      <Image
        src={item.src}
        alt="featrue"
        fill
        className="object-cover"
        sizes="(min-width: 1024px) 50vw, 100vw"
        placeholder="blur"
      />
      <div
        className={clsx(
          "relative bg-[#21386099] backdrop-blur-sm",
          "flex h-full flex-col justify-end gap-4",
          "text-sm text-white",
          "px-16 max-lg:px-12 max-md:px-8",
          "py-10 max-lg:py-8 max-md:py-6",
        )}
      >
        <h1 className="text-xl font-bold">{item.title}</h1>
        <p className="font-semibold">{item.caption}</p>
      </div>
    </section>
  );
}