1a:I[52397,["/_next/static/immutable/chunks/2igrrcde_vc4p.js","/_next/static/immutable/chunks/0n36v-3cexsuq.js","/_next/static/immutable/chunks/3-6-6opb2l_5p.js","/_next/static/immutable/chunks/41t6fga463v64.js"],"Workbench"] 1b:T1845,import type { ComponentConfig } from "@puckeditor/core"; /** * Announcement Bar — a slim, full-width notice for closures, weather alerts and deadlines. * The tone is announced to screen readers as text, so meaning never rests on color alone. * Register: `AnnouncementBarBlock: announcementBarBlock` in puck.config.tsx. */ type Tone = "info" | "success" | "warning" | "urgent"; type Emphasis = "soft" | "bold"; export type AnnouncementBarProps = { tone: Tone; emphasis: Emphasis; message: string; linkLabel: string; linkHref: string; }; const tones: Record = { info: { prefix: "Information:", soft: "border-indigo-200 bg-indigo-50 text-indigo-950", bold: "border-indigo-800 bg-indigo-700 text-white", softIcon: "text-indigo-600", softLink: "decoration-indigo-400 hover:decoration-indigo-950 focus-visible:outline-indigo-700", boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white", icon: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z", }, success: { prefix: "Good news:", soft: "border-emerald-200 bg-emerald-50 text-emerald-950", bold: "border-emerald-900 bg-emerald-800 text-white", softIcon: "text-emerald-600", softLink: "decoration-emerald-500 hover:decoration-emerald-950 focus-visible:outline-emerald-700", boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white", icon: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z", }, warning: { prefix: "Warning:", soft: "border-amber-200 bg-amber-50 text-amber-950", bold: "border-amber-500 bg-amber-400 text-amber-950", softIcon: "text-amber-600", softLink: "decoration-amber-500 hover:decoration-amber-950 focus-visible:outline-amber-700", boldLink: "decoration-amber-950/50 hover:decoration-amber-950 focus-visible:outline-amber-950", icon: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", }, urgent: { prefix: "Urgent:", soft: "border-red-200 bg-red-50 text-red-950", bold: "border-red-800 bg-red-700 text-white", softIcon: "text-red-600", softLink: "decoration-red-400 hover:decoration-red-950 focus-visible:outline-red-700", boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white", icon: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", }, }; export const announcementBarBlock: ComponentConfig = { label: "Announcement Bar", fields: { tone: { type: "select", label: "Tone", options: [ { label: "Info", value: "info" }, { label: "Success", value: "success" }, { label: "Warning", value: "warning" }, { label: "Urgent", value: "urgent" }, ], metadata: { help: "Sets the color and icon. Screen readers also hear the tone, like \"Warning:\", before the message." }, }, emphasis: { type: "radio", label: "Emphasis", options: [ { label: "Soft", value: "soft" }, { label: "Bold", value: "bold" }, ], metadata: { help: "Bold fills the bar with solid color. Save it for notices that can't be missed." }, }, message: { type: "textarea", label: "Message", metadata: { help: "Keep it to one sentence so the bar stays slim on phones." } }, linkLabel: { type: "text", label: "Link text", metadata: { help: "Leave blank to hide the link." } }, linkHref: { type: "text", label: "Link", metadata: { help: "A path (/closures), full URL, #anchor, mailto: or tel:." } }, }, defaultProps: { tone: "warning", emphasis: "soft", message: "All outdoor pools and splash pads are closed today due to severe weather. Indoor centers remain open on normal hours.", linkLabel: "See closures", linkHref: "/closures", }, render: ({ tone, emphasis, message, linkLabel, linkHref }) => { if (!message && !linkLabel) return <>; const t = tones[tone] ?? tones.info; const bold = emphasis === "bold"; return (

{t.prefix} {message} {linkLabel ? ( {linkLabel} ) : null}

); }, }; 1c:T97f8,

import type { ComponentConfig } from "@puckeditor/core";

/**
 * Announcement Bar — a slim, full-width notice for closures, weather alerts and deadlines.
 * The tone is announced to screen readers as text, so meaning never rests on color alone.
 * Register: `AnnouncementBarBlock: announcementBarBlock` in puck.config.tsx.
 */

type Tone = "info" | "success" | "warning" | "urgent";
type Emphasis = "soft" | "bold";

export type AnnouncementBarProps = {
  tone: Tone;
  emphasis: Emphasis;
  message: string;
  linkLabel: string;
  linkHref: string;
};

const tones: Record<Tone, { prefix: string; soft: string; bold: string; softIcon: string; softLink: string; boldLink: string; icon: string }> = {
  info: {
    prefix: "Information:",
    soft: "border-indigo-200 bg-indigo-50 text-indigo-950",
    bold: "border-indigo-800 bg-indigo-700 text-white",
    softIcon: "text-indigo-600",
    softLink: "decoration-indigo-400 hover:decoration-indigo-950 focus-visible:outline-indigo-700",
    boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white",
    icon: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z",
  },
  success: {
    prefix: "Good news:",
    soft: "border-emerald-200 bg-emerald-50 text-emerald-950",
    bold: "border-emerald-900 bg-emerald-800 text-white",
    softIcon: "text-emerald-600",
    softLink: "decoration-emerald-500 hover:decoration-emerald-950 focus-visible:outline-emerald-700",
    boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white",
    icon: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z",
  },
  warning: {
    prefix: "Warning:",
    soft: "border-amber-200 bg-amber-50 text-amber-950",
    bold: "border-amber-500 bg-amber-400 text-amber-950",
    softIcon: "text-amber-600",
    softLink: "decoration-amber-500 hover:decoration-amber-950 focus-visible:outline-amber-700",
    boldLink: "decoration-amber-950/50 hover:decoration-amber-950 focus-visible:outline-amber-950",
    icon: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
  },
  urgent: {
    prefix: "Urgent:",
    soft: "border-red-200 bg-red-50 text-red-950",
    bold: "border-red-800 bg-red-700 text-white",
    softIcon: "text-red-600",
    softLink: "decoration-red-400 hover:decoration-red-950 focus-visible:outline-red-700",
    boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white",
    icon: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
  },
};

export const announcementBarBlock: ComponentConfig<AnnouncementBarProps> = {
  label: "Announcement Bar",
  fields: {
    tone: {
      type: "select",
      label: "Tone",
      options: [
        { label: "Info", value: "info" },
        { label: "Success", value: "success" },
        { label: "Warning", value: "warning" },
        { label: "Urgent", value: "urgent" },
      ],
      metadata: { help: "Sets the color and icon. Screen readers also hear the tone, like \"Warning:\", before the message." },
    },
    emphasis: {
      type: "radio",
      label: "Emphasis",
      options: [
        { label: "Soft", value: "soft" },
        { label: "Bold", value: "bold" },
      ],
      metadata: { help: "Bold fills the bar with solid color. Save it for notices that can't be missed." },
    },
    message: { type: "textarea", label: "Message", metadata: { help: "Keep it to one sentence so the bar stays slim on phones." } },
    linkLabel: { type: "text", label: "Link text", metadata: { help: "Leave blank to hide the link." } },
    linkHref: { type: "text", label: "Link", metadata: { help: "A path (/closures), full URL, #anchor, mailto: or tel:." } },
  },
  defaultProps: {
    tone: "warning",
    emphasis: "soft",
    message: "All outdoor pools and splash pads are closed today due to severe weather. Indoor centers remain open on normal hours.",
    linkLabel: "See closures",
    linkHref: "/closures",
  },
  render: ({ tone, emphasis, message, linkLabel, linkHref }) => {
    if (!message && !linkLabel) return <></>;
    const t = tones[tone] ?? tones.info;
    const bold = emphasis === "bold";
    return (
      <div className={`w-full border-b ${bold ? t.bold : t.soft}`}>
        <div className="mx-auto flex max-w-7xl items-start gap-3 px-4 py-2 sm:items-center sm:justify-center sm:px-6 lg:px-8">
          <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className={`mt-3 size-5 shrink-0 sm:mt-0 ${bold ? "" : t.softIcon}`}>
            <path fillRule="evenodd" d={t.icon} clipRule="evenodd" />
          </svg>
          <p className="flex min-w-0 flex-wrap items-center gap-x-4 text-sm leading-6">
            <span className="py-2.5">
              <span className="sr-only">{t.prefix} </span>
              {message}
            </span>
            {linkLabel ? (
              <a
                href={linkHref || "#"}
                className={`group inline-flex min-h-11 shrink-0 items-center gap-1 rounded font-semibold whitespace-nowrap underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 ${bold ? t.boldLink : t.softLink}`}
              >
                {linkLabel}
                <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="size-4 transition group-hover:translate-x-0.5">
                  <path fillRule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.64l-3.22-3.22a.75.75 0 1 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06l3.22-3.22H3.75A.75.75 0 0 1 3 10Z" clipRule="evenodd" />
                </svg>
              </a>
            ) : null}
          </p>
        </div>
      </div>
    );
  },
};

1d:T1f5d,# Add the "Announcement Bar" block to this P1 project Add a Puck component from P1 Blocks ({origin}/blocks/announcement-bar) to this Pantheon Content Publisher (P1) Next.js project. A slim full-width notice in four tones, with text labels so meaning never relies on color alone. ## Steps 1. Create `components/puck/announcement-bar-block.tsx` with the exact file contents below. If `components/puck/` doesn't exist, find the folder where this project keeps its Puck components (look at the imports in `puck.config.tsx`) and put it there. 2. In `puck.config.tsx`, import it: `import { announcementBarBlock } from "./components/puck/announcement-bar-block";` 3. Register it under `components` as `AnnouncementBarBlock: announcementBarBlock`. 4. Add `"AnnouncementBarBlock"` to the best-fitting entry in `categories` (this block's library category is "Civic & utility"). Create a category only if none fits. 5. Run the project's type check (usually `pnpm typecheck`) and resolve anything project-specific. 6. If `package.json` has a `sync:registry` script, tell the user it must run (or that CI will run it) before the new component appears in the P1 editor. ## Rules - Do not add dependencies. The block is self-contained by design: one type-only import from `@puckeditor/core`, Tailwind v4 classes, no client JavaScript. - Keep the files as-is unless the user asks for changes. The accent color is `indigo-*`; if the project has brand colors, offer to swap them with a find-and-replace on `indigo-`. - Images are plain `imageUrl` + `imageAlt` text fields. If this project defines a P1 media-library field (search for `"p1-media"`), offer to switch to it. - Don't change prop names in `defaultProps`. Content editors' saved pages depend on them. ## File: `components/puck/announcement-bar-block.tsx` ```tsx import type { ComponentConfig } from "@puckeditor/core"; /** * Announcement Bar — a slim, full-width notice for closures, weather alerts and deadlines. * The tone is announced to screen readers as text, so meaning never rests on color alone. * Register: `AnnouncementBarBlock: announcementBarBlock` in puck.config.tsx. */ type Tone = "info" | "success" | "warning" | "urgent"; type Emphasis = "soft" | "bold"; export type AnnouncementBarProps = { tone: Tone; emphasis: Emphasis; message: string; linkLabel: string; linkHref: string; }; const tones: Record = { info: { prefix: "Information:", soft: "border-indigo-200 bg-indigo-50 text-indigo-950", bold: "border-indigo-800 bg-indigo-700 text-white", softIcon: "text-indigo-600", softLink: "decoration-indigo-400 hover:decoration-indigo-950 focus-visible:outline-indigo-700", boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white", icon: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z", }, success: { prefix: "Good news:", soft: "border-emerald-200 bg-emerald-50 text-emerald-950", bold: "border-emerald-900 bg-emerald-800 text-white", softIcon: "text-emerald-600", softLink: "decoration-emerald-500 hover:decoration-emerald-950 focus-visible:outline-emerald-700", boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white", icon: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z", }, warning: { prefix: "Warning:", soft: "border-amber-200 bg-amber-50 text-amber-950", bold: "border-amber-500 bg-amber-400 text-amber-950", softIcon: "text-amber-600", softLink: "decoration-amber-500 hover:decoration-amber-950 focus-visible:outline-amber-700", boldLink: "decoration-amber-950/50 hover:decoration-amber-950 focus-visible:outline-amber-950", icon: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", }, urgent: { prefix: "Urgent:", soft: "border-red-200 bg-red-50 text-red-950", bold: "border-red-800 bg-red-700 text-white", softIcon: "text-red-600", softLink: "decoration-red-400 hover:decoration-red-950 focus-visible:outline-red-700", boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white", icon: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", }, }; export const announcementBarBlock: ComponentConfig = { label: "Announcement Bar", fields: { tone: { type: "select", label: "Tone", options: [ { label: "Info", value: "info" }, { label: "Success", value: "success" }, { label: "Warning", value: "warning" }, { label: "Urgent", value: "urgent" }, ], metadata: { help: "Sets the color and icon. Screen readers also hear the tone, like \"Warning:\", before the message." }, }, emphasis: { type: "radio", label: "Emphasis", options: [ { label: "Soft", value: "soft" }, { label: "Bold", value: "bold" }, ], metadata: { help: "Bold fills the bar with solid color. Save it for notices that can't be missed." }, }, message: { type: "textarea", label: "Message", metadata: { help: "Keep it to one sentence so the bar stays slim on phones." } }, linkLabel: { type: "text", label: "Link text", metadata: { help: "Leave blank to hide the link." } }, linkHref: { type: "text", label: "Link", metadata: { help: "A path (/closures), full URL, #anchor, mailto: or tel:." } }, }, defaultProps: { tone: "warning", emphasis: "soft", message: "All outdoor pools and splash pads are closed today due to severe weather. Indoor centers remain open on normal hours.", linkLabel: "See closures", linkHref: "/closures", }, render: ({ tone, emphasis, message, linkLabel, linkHref }) => { if (!message && !linkLabel) return <>; const t = tones[tone] ?? tones.info; const bold = emphasis === "bold"; return (

{t.prefix} {message} {linkLabel ? ( {linkLabel} ) : null}

); }, }; ``` 1e:T15ed,/** * Announcement Bar — a slim, full-width notice for closures, weather alerts and deadlines. * The tone is announced to screen readers as text, so meaning never rests on color alone. * Usage: ``, or pass your own props. Every prop is optional. */ type Tone = "info" | "success" | "warning" | "urgent"; type Emphasis = "soft" | "bold"; export type AnnouncementBarProps = { /** Tone. Sets the color and icon. Screen readers also hear the tone, like "Warning:", before the message. */ tone: Tone; /** Emphasis. Bold fills the bar with solid color. Save it for notices that can't be missed. */ emphasis: Emphasis; /** Message. Keep it to one sentence so the bar stays slim on phones. */ message: string; /** Link text. Leave blank to hide the link. */ linkLabel: string; /** Link. A path (/closures), full URL, #anchor, mailto: or tel:. */ linkHref: string; }; const tones: Record = { info: { prefix: "Information:", soft: "border-indigo-200 bg-indigo-50 text-indigo-950", bold: "border-indigo-800 bg-indigo-700 text-white", softIcon: "text-indigo-600", softLink: "decoration-indigo-400 hover:decoration-indigo-950 focus-visible:outline-indigo-700", boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white", icon: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z", }, success: { prefix: "Good news:", soft: "border-emerald-200 bg-emerald-50 text-emerald-950", bold: "border-emerald-900 bg-emerald-800 text-white", softIcon: "text-emerald-600", softLink: "decoration-emerald-500 hover:decoration-emerald-950 focus-visible:outline-emerald-700", boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white", icon: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z", }, warning: { prefix: "Warning:", soft: "border-amber-200 bg-amber-50 text-amber-950", bold: "border-amber-500 bg-amber-400 text-amber-950", softIcon: "text-amber-600", softLink: "decoration-amber-500 hover:decoration-amber-950 focus-visible:outline-amber-700", boldLink: "decoration-amber-950/50 hover:decoration-amber-950 focus-visible:outline-amber-950", icon: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", }, urgent: { prefix: "Urgent:", soft: "border-red-200 bg-red-50 text-red-950", bold: "border-red-800 bg-red-700 text-white", softIcon: "text-red-600", softLink: "decoration-red-400 hover:decoration-red-950 focus-visible:outline-red-700", boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white", icon: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", }, }; /** Sample content: `` renders the block as previewed. Replace it with your own. */ export const announcementBarExample: AnnouncementBarProps = { tone: "warning", emphasis: "soft", message: "All outdoor pools and splash pads are closed today due to severe weather. Indoor centers remain open on normal hours.", linkLabel: "See closures", linkHref: "/closures", }; export function AnnouncementBar(props: Partial) { const { tone, emphasis, message, linkLabel, linkHref } = props as AnnouncementBarProps; if (!message && !linkLabel) return <>; const t = tones[tone] ?? tones.info; const bold = emphasis === "bold"; return (

{t.prefix} {message} {linkLabel ? ( {linkLabel} ) : null}

); } 1f:T74ac,

/**
 * Announcement Bar — a slim, full-width notice for closures, weather alerts and deadlines.
 * The tone is announced to screen readers as text, so meaning never rests on color alone.
 * Usage: `<AnnouncementBar {...announcementBarExample} />`, or pass your own props. Every prop is optional.
 */

type Tone = "info" | "success" | "warning" | "urgent";
type Emphasis = "soft" | "bold";

export type AnnouncementBarProps = {
  /** Tone. Sets the color and icon. Screen readers also hear the tone, like "Warning:", before the message. */
  tone: Tone;
  /** Emphasis. Bold fills the bar with solid color. Save it for notices that can't be missed. */
  emphasis: Emphasis;
  /** Message. Keep it to one sentence so the bar stays slim on phones. */
  message: string;
  /** Link text. Leave blank to hide the link. */
  linkLabel: string;
  /** Link. A path (/closures), full URL, #anchor, mailto: or tel:. */
  linkHref: string;
};

const tones: Record<Tone, { prefix: string; soft: string; bold: string; softIcon: string; softLink: string; boldLink: string; icon: string }> = {
  info: {
    prefix: "Information:",
    soft: "border-indigo-200 bg-indigo-50 text-indigo-950",
    bold: "border-indigo-800 bg-indigo-700 text-white",
    softIcon: "text-indigo-600",
    softLink: "decoration-indigo-400 hover:decoration-indigo-950 focus-visible:outline-indigo-700",
    boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white",
    icon: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z",
  },
  success: {
    prefix: "Good news:",
    soft: "border-emerald-200 bg-emerald-50 text-emerald-950",
    bold: "border-emerald-900 bg-emerald-800 text-white",
    softIcon: "text-emerald-600",
    softLink: "decoration-emerald-500 hover:decoration-emerald-950 focus-visible:outline-emerald-700",
    boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white",
    icon: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z",
  },
  warning: {
    prefix: "Warning:",
    soft: "border-amber-200 bg-amber-50 text-amber-950",
    bold: "border-amber-500 bg-amber-400 text-amber-950",
    softIcon: "text-amber-600",
    softLink: "decoration-amber-500 hover:decoration-amber-950 focus-visible:outline-amber-700",
    boldLink: "decoration-amber-950/50 hover:decoration-amber-950 focus-visible:outline-amber-950",
    icon: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
  },
  urgent: {
    prefix: "Urgent:",
    soft: "border-red-200 bg-red-50 text-red-950",
    bold: "border-red-800 bg-red-700 text-white",
    softIcon: "text-red-600",
    softLink: "decoration-red-400 hover:decoration-red-950 focus-visible:outline-red-700",
    boldLink: "decoration-white/50 hover:decoration-white focus-visible:outline-white",
    icon: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
  },
};

/** Sample content: `<AnnouncementBar {...announcementBarExample} />` renders the block as previewed. Replace it with your own. */
export const announcementBarExample: AnnouncementBarProps = {
  tone: "warning",
  emphasis: "soft",
  message: "All outdoor pools and splash pads are closed today due to severe weather. Indoor centers remain open on normal hours.",
  linkLabel: "See closures",
  linkHref: "/closures",
};

export function AnnouncementBar(props: Partial<AnnouncementBarProps>) {
  const { tone, emphasis, message, linkLabel, linkHref } = props as AnnouncementBarProps;
  if (!message && !linkLabel) return <></>;
  const t = tones[tone] ?? tones.info;
  const bold = emphasis === "bold";
  return (
    <div className={`w-full border-b ${bold ? t.bold : t.soft}`}>
      <div className="mx-auto flex max-w-7xl items-start gap-3 px-4 py-2 sm:items-center sm:justify-center sm:px-6 lg:px-8">
        <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className={`mt-3 size-5 shrink-0 sm:mt-0 ${bold ? "" : t.softIcon}`}>
          <path fillRule="evenodd" d={t.icon} clipRule="evenodd" />
        </svg>
        <p className="flex min-w-0 flex-wrap items-center gap-x-4 text-sm leading-6">
          <span className="py-2.5">
            <span className="sr-only">{t.prefix} </span>
            {message}
          </span>
          {linkLabel ? (
            <a
              href={linkHref || "#"}
              className={`group inline-flex min-h-11 shrink-0 items-center gap-1 rounded font-semibold whitespace-nowrap underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 ${bold ? t.boldLink : t.softLink}`}
            >
              {linkLabel}
              <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className="size-4 transition group-hover:translate-x-0.5">
                <path fillRule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.64l-3.22-3.22a.75.75 0 1 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06l3.22-3.22H3.75A.75.75 0 0 1 3 10Z" clipRule="evenodd" />
              </svg>
            </a>
          ) : null}
        </p>
      </div>
    </div>
  );
}

20:T1b31,

Editor fields