feat: verification layout

web/src/layout/VerificationLayout.tsx

@@ -0,0 +1,51 @@
+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;