画像を横並べにするコンポーネントを作る

import Image from "next/image";

type ImageItem = {
  src: string;
  alt: string;
  caption?: string;
};

type ImageGridProps = {
  title?: string;
  images: ImageItem[];
};

export function ImageGrid({ title, images }: ImageGridProps) {
  return (
    <div className="my-8 rounded-lg border border-stone-300 p-5">
      {title && (
        <p className="mb-5 text-base text-stone-800">
          {title}
        </p>
      )}

      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
        {images.map((image) => (
          <div key={image.src}>
            <Image
              src={image.src}
              alt={image.alt}
              width={600}
              height={600}
              className="h-auto w-full rounded-lg object-cover"
            />

            {image.caption && (
              <p className="mt-2 text-center text-sm text-stone-600">
                {image.caption}
              </p>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

import { ImageGrid } from "@/components/image-grid";

export function useMDXComponents(components: any) {
  return {
    ImageGrid,
    ...components,
  };
}

public/
---images/
   ---image1.jpg
   ---image2.jpg
   ---image3.jpg
   ---image4.jpg

<ImageGrid
  title="the following students can borrow up to 4.5 million JPY"
  images={[
    {
      src: "/images/image1.jpg",
      alt: "Image 1",
    },
    {
      src: "/images/image2.jpg",
      alt: "Image 2",
    },
    {
      src: "/images/image3.jpg",
      alt: "Image 3",
    },
    {
      src: "/images/image4.jpg",
      alt: "Image 4",
    },
  ]}
/>