SaaS starter

import { useState } from "react";
import { useAuth } from "../auth";

export function Settings() {
  const { user, signOut } = useAuth();
  const [saved, setSaved] = useState(false);
  const [name, setName] = useState(user?.name ?? "");
  return (
    <section className="max-w-lg">
      <h1 className="text-2xl font-semibold tracking-tight">Settings</h1>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          setSaved(true);
        }}
        className="mt-6 space-y-4 rounded-xl border border-slate-200 bg-white p-6"
      >
        <label className="block text-sm">
          <span className="font-medium">Display name</span>
          <input value={name} onChange={(e) => setName(e.target.value)} className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2" />
        </label>
        <p className="text-sm text-slate-600">Email: {user?.email}</p>
        <div className="flex gap-2">
          <button type="submit" className="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white">
            Save
          </button>
          <button type="button" onClick={signOut} className="rounded-md border border-slate-300 px-4 py-2 text-sm">
            Sign out
          </button>
        </div>
        {saved ? <p className="text-sm text-green-700">Saved locally (mock). Persist this to your API.</p> : null}
      </form>
    </section>
  );
}