4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T8bd,const approvedEmbedHosts = new Set([ 'airtable.com', 'docs.google.com', 'form.typeform.com', 'lookerstudio.google.com', 'maps.google.com', 'player.vimeo.com', 'vimeo.com', 'www.airtable.com', 'www.google.com', 'www.youtube-nocookie.com', 'www.youtube.com', 'youtube-nocookie.com', 'youtube.com', ]) const approvedEmbedHostSuffixes = [ '.airtable.com', '.google.com', '.typeform.com', '.vimeo.com', '.youtube-nocookie.com', '.youtube.com', ] const embedUrlError = 'Use an approved HTTPS embed URL.' const formActionError = 'Use a same-origin path, such as /api/newsletter.' const sameOriginBase = 'https://payload-components.local' const isApprovedEmbedHost = (hostname: string) => { const normalizedHost = hostname.toLowerCase() return ( approvedEmbedHosts.has(normalizedHost) || approvedEmbedHostSuffixes.some((suffix) => normalizedHost.endsWith(suffix)) ) } export const getSafeEmbedUrl = (value: unknown) => { if (typeof value !== 'string') return undefined const trimmed = value.trim() if (!trimmed) return undefined try { const parsed = new URL(trimmed) if (parsed.protocol !== 'https:' || parsed.username || parsed.password) { return undefined } if (!isApprovedEmbedHost(parsed.hostname)) { return undefined } return parsed.toString() } catch { return undefined } } export const validateEmbedUrl = (value: unknown) => getSafeEmbedUrl(value) ? true : embedUrlError export const getSafeFormAction = (value: unknown) => { if (typeof value !== 'string') return undefined const trimmed = value.trim() if (!trimmed || !trimmed.startsWith('/') || trimmed.startsWith('//') || trimmed.includes('\\')) { return undefined } try { const parsed = new URL(trimmed, sameOriginBase) if (parsed.origin !== sameOriginBase) { return undefined } return `${parsed.pathname}${parsed.search}${parsed.hash}` } catch { return undefined } } export const validateSameOriginFormAction = (value: unknown) => { if (value === null || value === undefined || (typeof value === 'string' && value.trim() === '')) { return true } return getSafeFormAction(value) ? true : formActionError } 53:T5b4,import { getSafeFormAction } from './safeUrls' const footerHrefError = 'Enter an HTTPS URL, a mailto:/tel: link, or a same-origin path such as /pricing.' /** * Resolve one footer link `href` to something safe to put on an anchor. * * Footers are almost entirely a link surface, and React does not sanitize `href` * — a stored `javascript:` or `data:` value would execute on click. Everything is * rejected here except the four shapes a real footer needs: a same-origin path, * an HTTPS URL, `mailto:`, and `tel:`. Both the admin `validate` and the render * path call through this, so a row written straight through the Local API (which * skips field validation) still cannot reach the DOM unchecked. */ export const getSafeFooterHref = (value: unknown) => { if (typeof value !== 'string') return undefined const trimmed = value.trim() if (!trimmed || /[\r\n\t]/.test(trimmed)) return undefined const sameOriginPath = getSafeFormAction(trimmed) if (sameOriginPath) return sameOriginPath try { const parsed = new URL(trimmed) if (parsed.username || parsed.password) return undefined if (parsed.protocol === 'https:') return parsed.toString() if (parsed.protocol === 'mailto:' || parsed.protocol === 'tel:') { return parsed.toString() } return undefined } catch { return undefined } } export const validateFooterHref = (value: unknown) => getSafeFooterHref(value) ? true : footerHrefError 54:T83d,import type { Field } from 'payload' import { validateFooterHref } from '@/blocks/shared/footerUrls' /** * Shared field core for the Footer component family. * * Every footer variant (footer-columns, footer-simple, footer-centered, …) * spreads `footerFields` first for the shared brand and copyright line, then * appends its own variant-specific shape — the grouped link columns, the flat * inline nav, or the centred stack with social links. Editing the shared brand * shape here updates every installed footer block at once, so the family never * drifts field-by-field across a repo. * * `brandLabel` is required even when a `logo` upload is set: it is the accessible * name for the home link, so an icon-only mark still announces itself to a screen * reader instead of reading as a bare image. When no logo is uploaded it also * renders as the visible text wordmark. * * `footerLinkFields` is the one-link shape reused by every variant. Its `href` is * validated with `validateFooterHref` in the admin and re-checked at render with * `getSafeFooterHref`, so an unexpected scheme cannot reach the DOM even if a row * was written straight through the Local API — see `@/blocks/shared/footerUrls`. * * Installed once per repo at `src/blocks/shared/footerFields.ts`; re-running * `payload-components add footer-*` never overwrites a copy you have already edited. */ export const footerFields: Field[] = [ { name: 'logo', type: 'upload', relationTo: 'media', admin: { description: 'Brand mark shown in the footer. Falls back to Brand label when empty.', }, }, { name: 'brandLabel', type: 'text', required: true, admin: { description: 'Accessible name for the home link, and the visible wordmark when no logo is uploaded.', }, }, { name: 'copyright', type: 'text', required: true, }, ] export const footerLinkFields: Field[] = [ { name: 'label', type: 'text', required: true, }, { name: 'href', type: 'text', required: true, validate: validateFooterHref, }, ] 55:T410,import type { Block } from 'payload' import { footerFields, footerLinkFields } from '@/blocks/shared/footerFields' export const FooterSimple: Block = { slug: 'footerSimple', // Existing apps must migrate stored data before adopting this identifier: // https://www.payload-components.xyz/docs/registry#installed-source-and-migrations dbName: 'pc_foo_sim', interfaceName: 'FooterSimpleBlock', fields: [ // Shared footer core (logo, brandLabel, copyright). Variant-specific fields // follow; edit the shared shape in @/blocks/shared/footerFields. ...footerFields, { name: 'links', type: 'array', required: true, minRows: 1, maxRows: 8, admin: { description: 'A single flat row of links — keep it short so the row stays on one line.', initCollapsed: true, }, // Shared link shape — see @/blocks/shared/footerFields. fields: footerLinkFields, }, ], labels: { plural: 'Footer Simple Blocks', singular: 'Footer Simple', }, } 56:T89b,import React from 'react' import type { FooterSimpleBlock as FooterSimpleBlockData } from '@/payload-types' import { getSafeFooterHref } from '@/blocks/shared/footerUrls' import { Media } from '@/components/Media' import { cn } from '@/utilities/ui' // Layout adapted from tailark/blocks (MIT) — re-implemented as a Payload block. type Props = FooterSimpleBlockData & { id?: string className?: string disableInnerContainer?: boolean } export const FooterSimpleBlock: React.FC = ({ brandLabel, className, copyright, disableInnerContainer, id, links, logo, }) => { return (

{logo ? ( ) : ( {brandLabel} )}

{copyright}

) } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://www.payload-components.xyz/r/footer-simple.json","proxyUrl":"https://shadcnregistry.com/r/payload-components/footer-simple","itemId":"@payload-components/footer-simple"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"payload-components/source/blocks/shared/safeUrls.ts","content":"$52","type":"registry:file","target":"~/src/blocks/shared/safeUrls.ts"},{"path":"payload-components/source/blocks/shared/footerUrls.ts","content":"$53","type":"registry:file","target":"~/src/blocks/shared/footerUrls.ts"},{"path":"payload-components/source/blocks/shared/footerFields.ts","content":"$54","type":"registry:file","target":"~/src/blocks/shared/footerFields.ts"},{"path":"payload-components/source/blocks/FooterSimple/config.ts","content":"$55","type":"registry:file","target":"~/src/blocks/FooterSimple/config.ts"},{"path":"payload-components/source/blocks/FooterSimple/Component.tsx","content":"$56","type":"registry:file","target":"~/src/blocks/FooterSimple/Component.tsx"}]}]]}],"$L57"]}]

Footer Simple

Installation

Files

~

Styles