Media group

import { mediaGroupField } from "@/fields/media-group"
import type { Block } from "payload"

export const ExampleBlock: Block = {
  slug: "example",
  interfaceName: "Example",
  fields: [
    // your other fields
    mediaGroupField,
  ],
}

import type { Example } from "@/payload-types"
import Image from "next/image"

export function ExampleBlock(props: Example) {
  return (
    <div className="grid grid-cols-2 gap-4">
      {props.mediaGroup?.map(({ id, media: item }) => {
        if (!item?.media || typeof item.media !== "object" || !item.media.url) {
          return null
        }

        return (
          <div
            key={id}
            className="relative overflow-hidden"
            style={{
              aspectRatio:
                item.aspectRatio === "original" ? undefined : item.aspectRatio,
            }}
          >
            <Image
              src={item.media.url}
              alt={item.media.alt ?? ""}
              fill
              sizes="50vw"
              className="h-auto w-full object-cover"
            />
          </div>
        )
      })}
    </div>
  )
}