Settings Page

"use client";

import * as React from "react";
import { SettingsPage, SettingsRow, SettingsSection } from "@/components/ui/settings-page";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";

export default function Settings() {
  const [name, setName] = React.useState("Madgixs");
  const [saved, setSaved] = React.useState("Madgixs");
  return (
    <SettingsPage
      title="Settings"
      sections={[{ id: "general", title: "General" }, { id: "notifications", title: "Notifications" }]}
      dirty={name !== saved}
      onSave={async () => setSaved(name)}
      onDiscard={() => setName(saved)}
    >
      <SettingsSection id="general" title="General">
        <SettingsRow label="Workspace name" htmlFor="ws-name">
          <Input id="ws-name" value={name} onChange={(e) => setName(e.target.value)} />
        </SettingsRow>
      </SettingsSection>
      <SettingsSection id="notifications" title="Notifications">
        <SettingsRow label="Email me when a document is signed">
          <Switch defaultChecked aria-label="Email me when a document is signed" />
        </SettingsRow>
      </SettingsSection>
    </SettingsPage>
  );
}