Feedback

import { Banner } from "@/design-system/components/Banner";
import { Button } from "@/design-system/components/Button";

export function BannerExample() {
  return (
    <div className="feedback-stack">
      <Banner
        tone="warning"
        variant="surface"
        title="Action required"
        dismissible
        actions={
          <>
            <Button size="sm" variant="ghost">Review</Button>
            <Button size="sm" variant="primary">Resolve</Button>
          </>
        }
      >
        Billing information needs verification before next cycle.
      </Banner>

      <Banner
        tone="primary"
        variant="gradient"
        title="New export workflow"
        actions={<Button size="sm" variant="primary">Open guide</Button>}
      >
        The export screen was upgraded for compliance and traceability.
      </Banner>

      <Banner
        tone="danger"
        variant="solid"
        title="Export blocked"
        dismissible
      >
        You do not have permission to export billing data.
      </Banner>
    </div>
  );
}

import { InlineNotice } from "@/design-system/components/InlineNotice";

export function InlineNoticeExample() {
  return (
    <div className="feedback-stack">
      <InlineNotice tone="info" title="Tip" dismissible>
        Use a consistent student naming format for exports.
      </InlineNotice>

      <InlineNotice tone="success" variant="surface" title="Saved">
        Changes were saved successfully.
      </InlineNotice>

      <InlineNotice tone="danger" variant="solid" title="Required">
        Missing consent form. Add it before submitting.
      </InlineNotice>
    </div>
  );
}

import { Callout } from "@/design-system/components/Callout";
import { Button } from "@/design-system/components/Button";

export function CalloutExample() {
  return (
    <div className="feedback-stack">
      <Callout
        tone="success"
        variant="surface"
        emphasized
        eyebrow="Clinical"
        title="Session note completed"
        description="This note is ready to be shared with the care team."
        actions={<Button size="sm" variant="primary">Share</Button>}
      />

      <Callout
        tone="info"
        variant="gradient"
        eyebrow="Onboarding"
        title="Add your first program"
        description="Programs help standardize goals, sessions, and reporting."
        actions={<Button size="sm" variant="primary">Create program</Button>}
      />
    </div>
  );
}

import { ConfirmDialog } from "@/design-system/components/ConfirmDialog";
import { Button } from "@/design-system/components/Button";

export function ConfirmDialogExample() {
  return (
    <ConfirmDialog
      tone="danger"
      variant="surface"
      destructive
      title="Delete student record?"
      description="This action cannot be undone."
      confirmLabel="Delete"
      cancelLabel="Cancel"
      onConfirm={async () => {
        // await api.deleteStudent(...)
      }}
      trigger={<Button variant="danger" size="sm">Delete</Button>}
      footerNote="You can export the record before deleting."
    />
  );
}