Teaser

import type { CollectionConfig } from "payload"
import { teaserField } from "@/fields/teaser"

export const Pages: CollectionConfig<"pages"> = {
  slug: "pages",
  // your other collection config
  fields: [
    {
      type: "tabs",
      tabs: [
        {
          fields: [teaserField],
          label: "Teaser",
        },
      ],
    },
    // your other fields
  ]
}

import type { Block } from "payload"
import { collectionsWithPage } from "@/lib/collections"
import { headlineLevelField } from "@/fields/headline"

export const ExampleBlock: Block = {
  slug: "example",
  interfaceName: "Example",
  fields: [
    // your other fields
    { ...headlineLevelField, name: "teaserHeadlineLevel", defaultValue: "h3" },
    {
      name: "items",
      type: "array",
      fields: [
        {
          name: "teaserElement",
          type: "relationship",
          relationTo: [...collectionsWithPage],
        },
      ],
    },
  ],
}

import { RichText } from "@/components/rich-text"
import type { Example } from "@/payload-types"

export function ExampleBlock({
  items,
  teaserHeadlineLevel
}: Example) {

  return (
    <div className="grid gap-grid sm:grid-cols-2 w-full">
      {items?.map((item, index) => {
        const href = getHrefByReference(item.teaserElement)
        if (
          typeof item.teaserElement?.value === "string" ||
          !href ||
          !item.teaserElement
        )
          return null
        return (
          <Link key={index} href={href} className="flex flex-col gap-4 overflow-hidden">
            <div className="relative aspect-video overflow-hidden">
              {item.teaserElement.value.media?.url && (
                <Image
                  src={item.teaserElement.value.media?.url ?? ""}
                  alt={item.teaserElement.value.media?.alt ?? ""}
                  fill
                  className="object-cover"
                  sizes={`(max-width: 640px) 100vw, 50vw`}
                />
              )}
            </div>
            <Headline
              className="truncate overflow-hidden text-ellipsis whitespace-nowrap"
              size="h5"
              level={teaserHeadlineLevel}
              text={item.teaserElement.value.title}
            />
            {item.teaserElement.value.description && (
              <RichText
                data={item.teaserElement.value.description}
                className="[&_p]:truncate [&_p]:overflow-hidden [&_p]:text-ellipsis [&_p]:whitespace-nowrap"
              />
            )}
          </Link>
        )
      })}
    </div>
  )
}