From 06c60b349155e8810228fb63933b8cd239bbafc8 Mon Sep 17 00:00:00 2001
From: LandaMm <qwer.009771@gmail.com>
Date: Sat, 7 Jun 2025 00:14:03 +0200
Subject: [PATCH] feat: verification layout

---
 web/src/layout/VerificationLayout.tsx | 51 +++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 web/src/layout/VerificationLayout.tsx

diff --git a/web/src/layout/VerificationLayout.tsx b/web/src/layout/VerificationLayout.tsx
new file mode 100644
index 0000000..b1f863c
--- /dev/null
+++ b/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;