Components

PolicyBody / PolicySection

Renders a structured legal document (Privacy Policy, EULA, etc.) from a PolicySectionData[] array. PolicyBody renders the whole document; PolicySection renders a single section.

Render a full policy document

live editor — edit to update preview
import { PolicyBody } from "@ann/ui";
import { getPrivacyPolicy } from "@ann/shared";

export default function PrivacyPage() {
  const sections = getPrivacyPolicy("anntech");
  return <PolicyBody sections={sections} />;
}

Render one section

live editor — edit to update preview
import { PolicySection } from "@ann/ui";

const section = {
  id: "data-collection",
  title: "Data we collect",
  body: "We collect the information you provide when you create an account...",
  cards: [
    { title: "Account info", description: "Name and email address." },
    { title: "Usage data", description: "Pages visited and features used." },
  ],
};

export default function SingleSection() {
  return <PolicySection section={section} />;
}

PolicyBody props

Props

PropTypeDefaultDescription
sections*PolicySectionData[]—Ordered array of sections to render. Imported from @ann/shared content helpers.

PolicySection props

Props

PropTypeDefaultDescription
section*PolicySectionData—A single policy section.

PolicySectionData type

// from @ann/shared
interface PolicySectionData {
  id: string;
  title: string;
  body?: string;       // prose paragraph(s)
  cards?: PolicyCard[];
}

interface PolicyCard {
  title: string;
  description: string;
  url?: string;        // optional link on the card
}