Honest UI change-review

"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
"use client"

import {
  ChangeReview,
  type ChangeReviewFieldNode,
} from "@/components/ui/honest-change-review"

type Member = { id: string; name: string }

// Sample workspace settings. `saved` is what the server holds; `draft` is the edited form.
const saved = {
  name: "Northwind Labs",
  billingEmail: "accounts@northwind.example",
  notifications: true,
  members: [
    { id: "m1", name: "Sam Cole" },
    { id: "m2", name: "Dee Park" },
  ],
}

const draft = {
  name: "Northwind Labs",
  billingEmail: "billing@northwind.example",
  notifications: false,
  members: [
    { id: "m2", name: "Dee Park" },
    { id: "m3", name: "Ana Ruiz" },
    { id: "m4", name: "Li Wei" },
  ],
}

const fields: ChangeReviewFieldNode[] = [
  { key: "name", label: "Workspace name" },
  { key: "billingEmail", label: "Billing email" },
  {
    key: "members",
    label: "Team access",
    type: "list",
    itemKey: "id",
    itemLabel: (member: Member) => member.name,
  },
  { key: "notifications", label: "Notifications", type: "boolean" },
]

  function ChangeReviewDemo() {
  return (
    <ChangeReview
      aria-label="Changes to workspace settings"
      before={saved}
      after={draft}
      fields={fields}
      className="max-w-2xl"
    />
  )
}

function SourceSpecimen(){return <ChangeReviewDemo/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider attribute="data-theme" defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}