52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { Stepper } from "@/components/ui/stepper";
|
|
import { useAuth } from "@/store/auth";
|
|
import { useVerify } from "@/store/verify";
|
|
import { Eye, MailCheck, ScanFace } from "lucide-react";
|
|
import { useEffect, type FC } from "react";
|
|
import { Outlet, useLocation } from "react-router";
|
|
|
|
const steps = [
|
|
{
|
|
id: "email",
|
|
icon: <MailCheck size={18} />,
|
|
label: "Verify Email",
|
|
description: "Confirm your address",
|
|
},
|
|
{
|
|
id: "avatar",
|
|
icon: <ScanFace size={20} />,
|
|
label: "Profile Picture",
|
|
description: "Add profile image",
|
|
},
|
|
{
|
|
id: "review",
|
|
icon: <Eye size={20} />,
|
|
label: "Done",
|
|
description: "Review & Quit",
|
|
},
|
|
];
|
|
|
|
const VerificationLayout: FC = () => {
|
|
const location = useLocation();
|
|
const profile = useAuth((s) => s.profile);
|
|
|
|
const step = useVerify((s) => s.step);
|
|
const loadStep = useVerify((s) => s.loadStep);
|
|
|
|
useEffect(() => {
|
|
if (profile) loadStep(profile);
|
|
}, [loadStep, profile]);
|
|
|
|
return (
|
|
<div className="w-full h-screen max-h-screen overflow-y-auto flex flex-col items-center sm:justify-center bg-white/50 dark:bg-black/50">
|
|
<div className="w-full h-full sm:w-auto sm:h-auto">
|
|
{location.pathname.replace(/\/$/i, "") !== "/verify" &&
|
|
step != null && <Stepper steps={steps} currentStep={step} />}
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VerificationLayout;
|