BREAKING: postgres + saas

components/settings/profile-settings-form copy.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { saveProfileAction } from "@/app/(app)/settings/actions"
+import { FormError } from "@/components/forms/error"
+import { FormInput } from "@/components/forms/simple"
+import { Button } from "@/components/ui/button"
+import { User } from "@prisma/client"
+import { CircleCheckBig } from "lucide-react"
+import { useActionState } from "react"
+
+export default function ProfileSettingsForm({ user }: { user: User }) {
+  const [saveState, saveAction, pending] = useActionState(saveProfileAction, null)
+
+  return (
+    <form action={saveAction} className="space-y-4">
+      <FormInput title="Your Name" name="name" defaultValue={user.name || ""} />
+
+      <div className="flex flex-row items-center gap-4">
+        <Button type="submit" disabled={pending}>
+          {pending ? "Saving..." : "Save"}
+        </Button>
+        {saveState?.success && (
+          <p className="text-green-500 flex flex-row items-center gap-2">
+            <CircleCheckBig />
+            Saved!
+          </p>
+        )}
+      </div>
+
+      {saveState?.error && <FormError>{saveState.error}</FormError>}
+    </form>
+  )
+}