/**
 * Callout Box — an inline notice that sits between paragraphs to flag something a reader
 * mustn't miss. Three weights (Note, Tip, Important), each with a visible text label and icon.
 * Usage: `<CalloutBox {...calloutBoxExample} />`, or pass your own props. Every prop is optional.
 */

type Variant = "note" | "tip" | "important";

export type CalloutBoxProps = {
  /** Type. Note is quiet background info, Tip is a helpful shortcut, Important is something readers must act on. Use Important sparingly. */
  variant: Variant;
  /** Label. Text shown before the message. Leave blank to use the type name (Note, Tip or Important). */
  label: string;
  /** Title. Optional bold first line. Leave blank to hide it. */
  title: string;
  /** Message. Keep it to a few sentences. Blank lines start a new paragraph. */
  body: string;
  /** Link text. Say where it goes. Leave blank to hide the link. */
  linkLabel: string;
  /** Link */
  linkHref: string;
  /** Width. Text column lines up with article text; wide matches full-width sections. */
  width: "prose" | "wide";
};

const variants: Record<
  Variant,
  { defaultLabel: string; box: string; rule: string; label: string; icon: string; title: string; body: string; link: string; iconPath: string }
> = {
  note: {
    defaultLabel: "Note",
    box: "bg-neutral-50 ring-1 ring-neutral-950/5",
    rule: "bg-neutral-400",
    label: "text-neutral-700",
    icon: "text-neutral-500",
    title: "text-neutral-950",
    body: "text-neutral-700",
    link: "text-neutral-950 decoration-neutral-400 hover:decoration-neutral-950 focus-visible:outline-indigo-600",
    iconPath:
      "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",
  },
  tip: {
    defaultLabel: "Tip",
    box: "bg-indigo-50 ring-1 ring-indigo-600/15",
    rule: "bg-indigo-600",
    label: "text-indigo-800",
    icon: "text-indigo-600",
    title: "text-neutral-950",
    body: "text-neutral-800",
    link: "text-indigo-800 decoration-indigo-300 hover:decoration-indigo-800 focus-visible:outline-indigo-600",
    iconPath:
      "M10 1a6 6 0 0 0-3.815 10.631C7.237 12.5 8 13.443 8 14.456v.644a.75.75 0 0 0 .572.729 6.016 6.016 0 0 0 2.856 0A.75.75 0 0 0 12 15.1v-.644c0-1.013.762-1.957 1.815-2.825A6 6 0 0 0 10 1ZM8.863 17.414a.75.75 0 0 0-.226 1.483 9.066 9.066 0 0 0 2.726 0 .75.75 0 0 0-.226-1.483 7.553 7.553 0 0 1-2.274 0Z",
  },
  important: {
    defaultLabel: "Important",
    box: "bg-indigo-950 shadow-lg shadow-indigo-950/10",
    rule: "bg-indigo-400",
    label: "text-indigo-200",
    icon: "text-indigo-300",
    title: "text-white",
    body: "text-indigo-100",
    link: "text-white decoration-indigo-400 hover:decoration-white focus-visible:outline-white",
    iconPath:
      "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",
  },
};

/** Sample content: `<CalloutBox {...calloutBoxExample} />` renders the block as previewed. Replace it with your own. */
export const calloutBoxExample: CalloutBoxProps = {
  variant: "important",
  label: "",
  title: "Bring proof of residency to your appointment",
  body: "A current utility bill, lease or property tax statement with your name and a city address is required for resident rates. Without it we'll book you at the non-resident rate and refund the difference once you show proof.",
  linkLabel: "What counts as proof of residency",
  linkHref: "/residency",
  width: "prose",
};

export function CalloutBox(props: Partial<CalloutBoxProps>) {
  const { variant, label, title, body, linkLabel, linkHref, width } = props as CalloutBoxProps;
  const v = variants[variant] ?? variants.note;
  const prefix = label?.trim() || v.defaultLabel;
  const paragraphs = (body || "").split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean);
  if (!title && paragraphs.length === 0) return <></>;

  return (
    <div className="px-4 py-6 sm:px-6 lg:px-8">
      <div
        role="note"
        aria-label={prefix}
        className={`relative mx-auto flex gap-4 overflow-hidden rounded-2xl py-5 pr-5 pl-6 sm:gap-5 sm:py-6 sm:pr-8 sm:pl-8 ${v.box} ${width === "wide" ? "max-w-7xl" : "max-w-3xl"}`}
      >
        <span aria-hidden="true" className={`absolute inset-y-0 left-0 w-1 ${v.rule}`} />
        <svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" className={`mt-0.5 size-5 shrink-0 ${v.icon}`}>
          <path fillRule="evenodd" d={v.iconPath} clipRule="evenodd" />
        </svg>
        <div className="min-w-0 flex-1">
          <p className={`text-xs font-semibold tracking-widest uppercase ${v.label}`}>
            {prefix}
            <span className="sr-only">:</span>
          </p>
          {title ? <p className={`mt-1.5 text-base font-semibold text-pretty sm:text-lg ${v.title}`}>{title}</p> : null}
          {paragraphs.length > 0 ? (
            <div className={`mt-2 space-y-3 text-base leading-7 text-pretty ${v.body}`}>
              {paragraphs.map((p, i) => (
                <p key={i}>{p}</p>
              ))}
            </div>
          ) : null}
          {linkLabel ? (
            <p className="mt-3">
              <a
                href={linkHref || "#"}
                className={`group inline-flex min-h-11 items-center gap-1.5 rounded-sm text-sm font-semibold underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 ${v.link}`}
              >
                {linkLabel}
                <svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor" className="size-4 transition group-hover:translate-x-0.5">
                  <path fillRule="evenodd" d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z" clipRule="evenodd" />
                </svg>
              </a>
            </p>
          ) : null}
        </div>
      </div>
    </div>
  );
}

20:T1d65,# Add the "Callout Box" component to this React project Add a React + Tailwind component from P1 Blocks ({origin}/blocks/callout-box?edition=react) to this project. An inline note, tip or important notice with a visible label, icon and optional link. ## Steps 1. Confirm the project uses React 19 and Tailwind CSS v4. If Tailwind is missing, tell the user: the block's styling is Tailwind utility classes. 2. Create `components/blocks/callout-box.tsx` with the exact contents below. If the project keeps components elsewhere (look for an existing `components/` or `src/components/` folder), put it there instead. 3. Use it where the user wants it: `import { CalloutBox, calloutBoxExample } from "/callout-box";` then ``, replacing the sample content with real content as props. 4. Run the project's type check and resolve anything project-specific. ## Rules - The component has no dependencies, no hooks beyond `useId`, and no client JavaScript. Don't add any. - Every prop is optional and typed; the JSDoc on each prop explains it. Keep prop names as they are. - The accent color is `indigo-*`; if the project has brand colors, offer to swap them with a find-and-replace on `indigo-`. ## File: `components/blocks/callout-box.tsx` ```tsx /** * Callout Box — an inline notice that sits between paragraphs to flag something a reader * mustn't miss. Three weights (Note, Tip, Important), each with a visible text label and icon. * Usage: ``, or pass your own props. Every prop is optional. */ type Variant = "note" | "tip" | "important"; export type CalloutBoxProps = { /** Type. Note is quiet background info, Tip is a helpful shortcut, Important is something readers must act on. Use Important sparingly. */ variant: Variant; /** Label. Text shown before the message. Leave blank to use the type name (Note, Tip or Important). */ label: string; /** Title. Optional bold first line. Leave blank to hide it. */ title: string; /** Message. Keep it to a few sentences. Blank lines start a new paragraph. */ body: string; /** Link text. Say where it goes. Leave blank to hide the link. */ linkLabel: string; /** Link */ linkHref: string; /** Width. Text column lines up with article text; wide matches full-width sections. */ width: "prose" | "wide"; }; const variants: Record< Variant, { defaultLabel: string; box: string; rule: string; label: string; icon: string; title: string; body: string; link: string; iconPath: string } > = { note: { defaultLabel: "Note", box: "bg-neutral-50 ring-1 ring-neutral-950/5", rule: "bg-neutral-400", label: "text-neutral-700", icon: "text-neutral-500", title: "text-neutral-950", body: "text-neutral-700", link: "text-neutral-950 decoration-neutral-400 hover:decoration-neutral-950 focus-visible:outline-indigo-600", iconPath: "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", }, tip: { defaultLabel: "Tip", box: "bg-indigo-50 ring-1 ring-indigo-600/15", rule: "bg-indigo-600", label: "text-indigo-800", icon: "text-indigo-600", title: "text-neutral-950", body: "text-neutral-800", link: "text-indigo-800 decoration-indigo-300 hover:decoration-indigo-800 focus-visible:outline-indigo-600", iconPath: "M10 1a6 6 0 0 0-3.815 10.631C7.237 12.5 8 13.443 8 14.456v.644a.75.75 0 0 0 .572.729 6.016 6.016 0 0 0 2.856 0A.75.75 0 0 0 12 15.1v-.644c0-1.013.762-1.957 1.815-2.825A6 6 0 0 0 10 1ZM8.863 17.414a.75.75 0 0 0-.226 1.483 9.066 9.066 0 0 0 2.726 0 .75.75 0 0 0-.226-1.483 7.553 7.553 0 0 1-2.274 0Z", }, important: { defaultLabel: "Important", box: "bg-indigo-950 shadow-lg shadow-indigo-950/10", rule: "bg-indigo-400", label: "text-indigo-200", icon: "text-indigo-300", title: "text-white", body: "text-indigo-100", link: "text-white decoration-indigo-400 hover:decoration-white focus-visible:outline-white", iconPath: "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", }, }; /** Sample content: `` renders the block as previewed. Replace it with your own. */ export const calloutBoxExample: CalloutBoxProps = { variant: "important", label: "", title: "Bring proof of residency to your appointment", body: "A current utility bill, lease or property tax statement with your name and a city address is required for resident rates. Without it we'll book you at the non-resident rate and refund the difference once you show proof.", linkLabel: "What counts as proof of residency", linkHref: "/residency", width: "prose", }; export function CalloutBox(props: Partial) { const { variant, label, title, body, linkLabel, linkHref, width } = props as CalloutBoxProps; const v = variants[variant] ?? variants.note; const prefix = label?.trim() || v.defaultLabel; const paragraphs = (body || "").split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean); if (!title && paragraphs.length === 0) return <>; return (

{prefix} :

{title ?

{title}

: null} {paragraphs.length > 0 ? (

{paragraphs.map((p, i) => (

{p}

))}

) : null} {linkLabel ? (

{linkLabel}

) : null}

); } ``` 11:["$","div",null,{"className":"mx-auto max-w-[1400px] px-4 pt-8 pb-24 sm:px-6 lg:px-10 lg:pt-12","children":[["$","nav",null,{"aria-label":"Breadcrumb","className":"font-mono text-xs text-ink-soft","children":["$","ol",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","li",null,{"children":["$","$L5",null,{"href":"/#catalog","className":"hover:text-ink focus-visible:outline-2 focus-visible:outline-signal","children":"Catalog"}]}],["$","li",null,{"aria-hidden":"true","children":"/"}],["$","li",null,{"children":"Content"}]]}]}],["$","header",null,{"className":"mt-6 grid gap-6 lg:grid-cols-12 lg:items-end","children":[["$","div",null,{"className":"lg:col-span-8","children":[["$","p",null,{"className":"font-mono text-xs tracking-[0.2em] text-signal-ink uppercase","children":["Block ","25"," of ",260]}],["$","h1",null,{"className":"mt-3 text-5xl font-bold tracking-[-0.04em] sm:text-6xl lg:text-7xl","children":"Callout Box"}],["$","p",null,{"className":"mt-4 max-w-2xl text-lg leading-8 text-ink-soft","children":"An inline note, tip or important notice with a visible label, icon and optional link."}]]}],["$","dl",null,{"className":"grid grid-cols-2 gap-x-6 gap-y-3 font-mono text-xs lg:col-span-4","children":[["$","div",null,{"children":[["$","dt",null,{"className":"text-ink-soft","children":"Puck key"}],["$","dd",null,{"className":"mt-0.5 text-ink","children":"CalloutBoxBlock"}]]}],["$","div",null,{"children":[["$","dt",null,{"className":"text-ink-soft","children":"Export"}],["$","dd",null,{"className":"mt-0.5 text-ink","children":"calloutBoxBlock"}]]}],["$","div",null,{"className":"col-span-2","children":[["$","dt",null,{"className":"text-ink-soft","children":"React component"}],["$","dd",null,{"className":"mt-0.5 text-ink","children":["<","CalloutBox"," ","/>"]}]]}],["$","div",null,{"className":"col-span-2","children":[["$","dt",null,{"className":"text-ink-soft","children":"Path"}],[["$","dd","callout-box.tsx",{"className":"mt-0.5 break-all text-ink","children":"components/puck/callout-box-block.tsx"}]]]}],["$","div",null,{"className":"col-span-2","children":[["$","dt",null,{"className":"text-ink-soft","children":"Dependencies"}],["$","dd",null,{"className":"mt-0.5 text-ink","children":"None"}]]}]]}]]}],["$","div",null,{"className":"mt-10","children":["$","$L1a",null,{"slug":"callout-box","name":"Callout Box","install":null,"editions":{"p1":{"files":[{"name":"callout-box.tsx","target":"components/puck/callout-box-block.tsx","source":"$1b","html":"$1c"}],"snippet":"// puck.config.tsx\nimport { calloutBoxBlock } from \"./components/puck/callout-box-block\";\n\nexport const config = {\n categories: {\n // …add to an existing category, or create one:\n sections: { title: \"Sections\", components: [/* … */ \"CalloutBoxBlock\"] },\n },\n components: {\n // …your existing components\n CalloutBoxBlock: calloutBoxBlock,\n },\n} as Config;","agentBrief":"$1d"},"react":{"files":[{"name":"callout-box.tsx","target":"components/blocks/callout-box.tsx","source":"$1e","html":"$1f"}],"snippet":"import { CalloutBox, calloutBoxExample } from \"@/components/blocks/callout-box\";\n\n// Every prop is optional. Start from the sample content…\n\n\n// …or pass your own.\n","agentBrief":"$20"}}}]}],"$L21","$L22"]}]

Editor fields