55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
|
||
export default function ProfileForm({ user }: { user: { id: string; name: string; email: string } }) {
|
||
const [name, setName] = useState(user.name);
|
||
const [saved, setSaved] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
async function handleSubmit(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
setLoading(true);
|
||
await fetch("/api/user/profile", {
|
||
method: "PUT",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ name }),
|
||
});
|
||
setSaved(true);
|
||
setLoading(false);
|
||
setTimeout(() => setSaved(false), 3000);
|
||
}
|
||
|
||
return (
|
||
<form onSubmit={handleSubmit} className="bg-white rounded-2xl shadow p-6 flex flex-col gap-4">
|
||
<h2 className="font-bold text-lg">اطلاعات حساب</h2>
|
||
<div>
|
||
<label className="block text-sm font-medium mb-1">نام</label>
|
||
<input
|
||
type="text"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
className="w-full border rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium mb-1">ایمیل</label>
|
||
<input
|
||
type="email"
|
||
value={user.email}
|
||
disabled
|
||
className="w-full border rounded-xl px-4 py-2.5 bg-gray-50 text-gray-400"
|
||
/>
|
||
</div>
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="bg-green-700 text-white py-2.5 rounded-xl font-bold hover:bg-green-800 transition disabled:opacity-50"
|
||
>
|
||
{loading ? "در حال ذخیره..." : "ذخیره"}
|
||
</button>
|
||
{saved && <p className="text-green-600 text-sm text-center">✓ ذخیره شد</p>}
|
||
</form>
|
||
);
|
||
}
|