112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useUser } from "@clerk/nextjs";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
interface UserProfile {
|
|
firstName: string;
|
|
lastName: string;
|
|
email: string;
|
|
phoneNumber: string;
|
|
}
|
|
|
|
export default function ProfilePage() {
|
|
const { user, isLoaded } = useUser();
|
|
const [profile, setProfile] = useState<UserProfile>({
|
|
firstName: "",
|
|
lastName: "",
|
|
email: "",
|
|
phoneNumber: "",
|
|
});
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (isLoaded && user) {
|
|
setProfile({
|
|
firstName: user.firstName || "",
|
|
lastName: user.lastName || "",
|
|
email: user.emailAddresses[0]?.emailAddress || "",
|
|
phoneNumber: user.phoneNumbers[0]?.phoneNumber || "",
|
|
});
|
|
}
|
|
}, [isLoaded, user]);
|
|
|
|
const handleSave = async () => {
|
|
try {
|
|
await user?.update({
|
|
firstName: profile.firstName,
|
|
lastName: profile.lastName,
|
|
});
|
|
setIsEditing(false);
|
|
} catch (error) {
|
|
console.error("Error updating profile:", error);
|
|
}
|
|
};
|
|
|
|
if (!isLoaded) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto py-8">
|
|
<div className="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h1 className="text-2xl font-bold">Profile</h1>
|
|
<Button
|
|
variant={isEditing ? "default" : "secondary"}
|
|
onClick={() => setIsEditing(!isEditing)}
|
|
>
|
|
{isEditing ? "Cancel" : "Edit Profile"}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">First Name</label>
|
|
<Input
|
|
type="text"
|
|
value={profile.firstName}
|
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
|
setProfile({ ...profile, firstName: e.target.value })
|
|
}
|
|
disabled={!isEditing}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Last Name</label>
|
|
<Input
|
|
type="text"
|
|
value={profile.lastName}
|
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
|
setProfile({ ...profile, lastName: e.target.value })
|
|
}
|
|
disabled={!isEditing}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Email</label>
|
|
<Input type="email" value={profile.email} disabled />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">
|
|
Phone Number
|
|
</label>
|
|
<Input type="tel" value={profile.phoneNumber} disabled />
|
|
</div>
|
|
|
|
{isEditing && (
|
|
<div className="pt-4">
|
|
<Button onClick={handleSave}>Save Changes</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|