Media with aspect

import { mediaWithAspectField } from "@/fields/media-with-aspect"
import type { Block } from "payload"

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

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

export function ExampleBlock(props: Example) {
  const item = props.media
  if (!item?.media || typeof item.media !== "object" || !item.media.url) {
    return null
  }

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