29 lines
1.1 KiB
JavaScript
29 lines
1.1 KiB
JavaScript
|
import Link from "next/link";
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
import { ArrowLeft } from "lucide-react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
|
||
|
|
export default function HeaderOfSteps({ step, colors, numberStep }) {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="mb-8">
|
||
|
|
<div className="flex items-center justify-between mb-4">
|
||
|
|
<Link href="/auth/choose-role" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group">
|
||
|
|
<motion.div whileHover={{ x: -5 }}>
|
||
|
|
<ArrowLeft className="w-4 h-4" />
|
||
|
|
</motion.div>
|
||
|
|
<span>{t("forgotPassword.backToLogin")}</span>
|
||
|
|
</Link>
|
||
|
|
<span className="text-sm text-gray-200">{t("register.stepOf2", { step: step })}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
{numberStep.map((s) => (
|
||
|
|
<motion.div key={s} className={`h-2 flex-1 rounded-full ${step >= s ? colors : "bg-gray-800"}`} animate={{ scaleX: step >= s ? 1 : 0.5 }} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|