48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth } from "@/components/auth/AuthContext";
|
|
import { AccountTabs } from "@/components/account/AccountTabs";
|
|
import { IconButton } from "@/components/IconButton";
|
|
import { IoLogInOutline } from "react-icons/io5";
|
|
|
|
export default function AccountPage() {
|
|
const { customer, isAuthenticated, isLoading, logout } = useAuth();
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
if (!isLoading && !isAuthenticated) {
|
|
router.replace("/account/login");
|
|
}
|
|
}, [isLoading, isAuthenticated, router]);
|
|
|
|
if (isLoading || !customer) {
|
|
return (
|
|
<main className="flex min-h-[60vh] items-center justify-center">
|
|
<p className="text-lightsec dark:text-darksec">Loading…</p>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<main className="mx-auto max-w-250 px-6 py-12 md:px-8 md:py-16">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="font-argesta text-3xl">My Account</h1>
|
|
<p className="mt-2 text-sm text-lightsec dark:text-darksec">{customer.email}</p>
|
|
</div>
|
|
<IconButton
|
|
onClick={async () => {
|
|
await logout();
|
|
router.push("/");
|
|
}}
|
|
>
|
|
<IoLogInOutline />
|
|
</IconButton>
|
|
</div>
|
|
|
|
<AccountTabs />
|
|
</main>
|
|
);
|
|
}
|