51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import StepsContext from '@/context/StepsContext';
|
||
|
|
import { useCallback, useContext, useState } from 'react';
|
||
|
|
|
||
|
|
interface IStep {
|
||
|
|
number: 1 | 2 | 3;
|
||
|
|
name: string;
|
||
|
|
last: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const Step = ({ number, name, last }: IStep) => {
|
||
|
|
const { stepContext } = useContext(StepsContext);
|
||
|
|
const { step, setStep } = stepContext;
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="step flex md:flex-row md:w-full flex-col items-center h-fit w-fit justify-start"
|
||
|
|
style={last ? { gridTemplateColumns: '51px 130px' } : {}}>
|
||
|
|
<div
|
||
|
|
className="step-circle w-[45px] h-[45px] rounded-full bg-[#131369] relative transition-all flex items-center justify-center"
|
||
|
|
style={step === number ? { background: ' #131369' } : {}}>
|
||
|
|
<div
|
||
|
|
className="step-tick absolute top-0 left-0 bg-step-tick w-full h-full rounded-full opacity-0 transition-all z-10"
|
||
|
|
style={step !== number ? { opacity: 1 } : {}}></div>
|
||
|
|
<div
|
||
|
|
className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] rounded-full w-full h-full border border-solid border-[#131369] transition-all pointer-events-none"
|
||
|
|
style={
|
||
|
|
step === number ? { width: '51px', height: '51px', opacity: 1 } : { opacity: 0 }
|
||
|
|
}></div>
|
||
|
|
<span className="font-roboto font-bold flex items-center justify-center text-2xl text-center text-white transition-all w-[45px] h-[45px]">
|
||
|
|
{number}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p
|
||
|
|
className="step-name md:block hidden font-mw_sans font-light text-black ml-2 max-w-[130px]"
|
||
|
|
onClick={() => setStep(number)}>
|
||
|
|
{name}
|
||
|
|
</p>
|
||
|
|
{!last ? (
|
||
|
|
<div className="step-line bg-step_line bg-repeat md:block hidden md:w-full h-full w-1 md:h-0.5 overflow-hidden">
|
||
|
|
<div
|
||
|
|
className="h-full z-10 w-0 bg-[#08CB9C] transition-all"
|
||
|
|
style={step !== number ? { width: '100%' } : {}}></div>
|
||
|
|
</div>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Step;
|