Audience selection

import { AudienceSelection, type Audience } from "@/components/blocks/audience-selection-block";

"use client";

import * as React from "react";
import {
  AudienceSelection,
  type Audience,
} from "@/components/blocks/audience-selection-block";

const AUDIENCES: Audience[] = [
  { id: "a-teens", name: "The Teens", category: "Teenagers" },
  { id: "a-kids", name: "Kids", category: "Kid-Friendly" },
  { id: "a-women", name: "Women's Ministry", category: "Women Only" },
  { id: "a-young", name: "Young Adults", category: "General Audience" },
];

export default function Page() {
  // `audiences` is the list to choose from. Creating one via the add button
  // appends to an internal copy (and fires `onCreate` if provided), so the
  // picker is self-contained without a backing store.
  //
  // `value` + `onChange` control the selected audience id; omit both to let
  // the picker manage its own selection.
  //
  // Flat props: `title`, `caption`, `required`, `showAddButton`,
  // `searchEnabled`, `cols` (number | "auto"), `addLayout`
  // ("drawer" | "modal"), `categories`, `addButtonLabel`, `onCreate`,
  // and `error`.
  const [value, setValue] = React.useState<string>();
  return (
    <AudienceSelection
      title="Who will be the primary audience for this project?"
      caption="Please select the most appropriate category below or create a new one."
      required
      audiences={AUDIENCES}
      cols={2}
      addLayout="drawer"
      value={value}
      onChange={setValue}
    />
  );
}

AudienceSelection (flat block)
├── FieldLabel (title + caption + required asterisk)
├── Toolbar row: Search Input (searchEnabled) + add icon-button (showAddButton)
├── RadioGroup type="card" (cols | "auto") — 3 rows, then Pagination
│   └── per audience: category icon + name (label) + category Badge + ⋯ menu (editable)
│       └── DropdownMenu → Edit (reuses the form) / Delete (destructive)
├── Create / edit form (addLayout="drawer" | "modal")
│   ├── TextField — audience name (≥2 chars, de-duped)
│   └── RadioGroup type="chip" — category
└── Delete confirmation Dialog (type="confirm")