twotalesanimation
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import { auth } from "@/auth";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { getInitials } from "@/lib/utils";
|
|
import { ChangePasswordForm } from "@/components/settings/ChangePasswordForm";
|
|
|
|
export const metadata = { title: "Settings" };
|
|
|
|
export default async function SettingsPage() {
|
|
const session = await auth();
|
|
if (!session?.user) return null;
|
|
|
|
return (
|
|
<div className="p-6 space-y-6 max-w-2xl mx-auto">
|
|
<h1 className="text-2xl font-bold">Account Settings</h1>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Your Profile</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex items-center gap-4">
|
|
<Avatar className="h-14 w-14">
|
|
{session.user.image && <AvatarImage src={session.user.image} />}
|
|
<AvatarFallback className="text-lg">
|
|
{getInitials(session.user.name)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<p className="font-semibold">{session.user.name ?? "—"}</p>
|
|
<p className="text-sm text-muted-foreground">{session.user.email}</p>
|
|
<p className="text-xs text-muted-foreground mt-0.5 capitalize">
|
|
{session.user.role?.toLowerCase()}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<ChangePasswordForm mustChangePassword={session.user.mustChangePassword ?? false} />
|
|
</div>
|
|
);
|
|
}
|