This project is still a work in progress.

payload bricks
Fields

Link group

List of links

Installation

npx shadcn@latest add https://payload-bricks.bblank.dev/r/link-group-field.json

Usage

example-config.ts
import { linkGroupField } from "@/fields/link-group"
import type { Block } from "payload"

export const ExampleBlock: Block = {
  slug: "example",
  interfaceName: "Example",
  fields: [
    // your other fields
    linkGroupField,
  ],
}
example-block.tsx
import { getHrefByLink } from "@/lib/get-href-by-link"
import type { Example } from "@/payload-types"
import Link from "next/link"

export function ExampleBlock(props: Example) {
  return (
    <nav>
      {props.links?.map(({ id, link }) => {
        const href = getHrefByLink(link)
        return href ? (
          <Link href={href} key={id}>
            {link?.label}
          </Link>
        ) : null
      })}
    </nav>
  )
}

Field structure

nametypecontents
linksarraylink field

On this page