Settings layout

"use client";
import * as React from "react";
import { SettingsGroup, SettingsLayout, SettingsNote, SettingsRow, SettingsTabs } from "@/components/ui/notchset/blocks/settings-layout";
import { Meter } from "@/components/ui/notchset/meter";
import { Switch } from "@/components/ui/notchset/switch";

const NAV = [
  ["workspace", "Workspace"],
  ["team", "Team & quotas"],
  ["billing", "Plan & billing"],
] as const;

export default function SettingsLayoutDemo() {
  const [log, setLog] = React.useState(true);
  return (
    <SettingsLayout nav={NAV.map(([key, label]) => ({ key, label, href: `#${key}` }))} current="billing" picked backHref="#" title="Plan & billing">
      <SettingsTabs
        label="Plan and billing"
        current="overview"
        items={[
          { key: "overview", label: "Overview", href: "#overview" },
          { key: "seats", label: "Seats", href: "#seats" },
          { key: "invoices", label: "Invoices", href: "#invoices", count: 6 },
        ]}
      />
      <SettingsGroup title="Usage" hint="What Growth includes, and how much of it you use.">
        <SettingsRow label="Seats" hint="8 of 10 on Growth · 2 left">
          <Meter kind="usage" size="md" value={8} max={10} label="Seats used" />
        </SettingsRow>
        <SettingsRow label="Log meetings on company timelines" hint="Each meeting with a contact shows up where the deal team looks">
          <Switch checked={log} onCheckedChange={setLog} aria-label="Log meetings on company timelines" />
        </SettingsRow>
      </SettingsGroup>
      <SettingsNote>Stage names come from the app config, so they stay the same across every page.</SettingsNote>
    </SettingsLayout>
  );
}