122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
import { Link } from "@/i18n/routing";
|
|
import { useTranslations } from "next-intl";
|
|
import { RegistrationLayoutProps, RegistrationStep } from "@/types/registration";
|
|
|
|
export const RegistrationLayout: React.FC<RegistrationLayoutProps> = ({
|
|
children,
|
|
currentStep,
|
|
totalSteps,
|
|
className,
|
|
}) => {
|
|
const t = useTranslations("LandingPage");
|
|
|
|
const getStepNumber = (step: RegistrationStep): number => {
|
|
switch (step) {
|
|
case "identity":
|
|
return 1;
|
|
case "otp":
|
|
return 2;
|
|
case "profile":
|
|
return 3;
|
|
default:
|
|
return 1;
|
|
}
|
|
};
|
|
|
|
const currentStepNumber = getStepNumber(currentStep);
|
|
|
|
return (
|
|
<div className={`overflow-y-auto flex flex-wrap w-full h-dvh ${className || ""}`}>
|
|
{/* Left Side - Background */}
|
|
<div className="lg:block hidden flex-1 overflow-hidden bg-[#f7f7f7] text-[40px] leading-[48px] text-default-600 relative z-[1]">
|
|
<div className="max-w-[520px] pt-16 ps-20">
|
|
<Link href="/" className="mb-6 inline-block">
|
|
<Image
|
|
src="/assets/mediahub-logo.png"
|
|
alt="MediaHub Logo"
|
|
width={250}
|
|
height={250}
|
|
className="mb-10 w-full h-full"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
|
|
<Image
|
|
src="/assets/vector-login.svg"
|
|
alt="Background Vector"
|
|
width={300}
|
|
height={300}
|
|
className="mb-10 w-full h-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Side - Form */}
|
|
<div className="flex-1 w-full bg-white dark:bg-slate-600">
|
|
<div className="flex flex-col mb-8">
|
|
{/* Step Indicator */}
|
|
<div className="flex flex-row justify-center py-10">
|
|
<ul className="flex flex-row items-center text-center">
|
|
{Array.from({ length: totalSteps }, (_, index) => {
|
|
const stepNumber = index + 1;
|
|
const isActive = stepNumber === currentStepNumber;
|
|
const isCompleted = stepNumber < currentStepNumber;
|
|
|
|
return (
|
|
<React.Fragment key={stepNumber}>
|
|
<li>
|
|
<div
|
|
className={`flex justify-center items-center text-center text-black bg-[#f32d2d] h-[40px] w-[40px] border rounded-full transition-all duration-300 ${
|
|
isActive
|
|
? "bg-white border-[#f32d2d] text-[#f32d2d]"
|
|
: isCompleted
|
|
? "bg-[#f32d2d] text-white"
|
|
: "bg-gray-300 text-gray-600"
|
|
}`}
|
|
>
|
|
<b>{stepNumber}</b>
|
|
</div>
|
|
</li>
|
|
{stepNumber < totalSteps && (
|
|
<div
|
|
className={`w-16 h-1 transition-all duration-300 ${
|
|
isCompleted ? "bg-[#f32d2d]" : "bg-gray-300"
|
|
}`}
|
|
/>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Step Title */}
|
|
<div className="flex flex-row">
|
|
<div className="px-8 my-10 gap-3">
|
|
<h1 className="text-2xl lg:text-4xl px-0 lg:px-12 font-bold">
|
|
{currentStep === "identity" && t("registerFirst", { defaultValue: "Registration" })}
|
|
{currentStep === "otp" && t("enterOTP", { defaultValue: "Enter OTP" })}
|
|
{currentStep === "profile" && t("userData", { defaultValue: "User Data" })}
|
|
</h1>
|
|
<p className="px-0 lg:px-12 text-sm lg:text-base mt-2">
|
|
{t("alreadyHave", { defaultValue: "Already have an account?" })}{" "}
|
|
<Link href="/auth" className="text-red-500">
|
|
<b>{t("logIn", { defaultValue: "Log In" })}</b>
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Form Content */}
|
|
<div className="flex-1">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|