Very simple react step component with typescript

Steps.tsx

import { Check } from "lucide-react";

export default function Steps({ steps, currentStep = 1 }: { steps: string[], currentStep?: number }) {

    return (
        <div className="flex gap-x-0 -mx-4 lg:-ms-0 overflow-auto py-4">
            {steps.map((step, index) => (
                <div key={index} className="flex flex-col items-center px-4 gap-2 relative step-circle-container ">
                    <div className={`${currentStep > index + 1 ? 'before:bg-gray-700 after:bg-gray-700 border-gray-700' : 'before:bg-gray-300 after:bg-gray-300 border-gray-300'} h-5 w-5 bg-white border rounded-full step-circle flex items-center justify-center `}>
                        <div className={`${currentStep > index + 1 ? 'scale-100  w-full h-full' : currentStep == index + 1 ? ' scale-100  h-1.5 w-1.5' : 'scale-0'} flex items-center justify-center   rounded-full bg-gray-700 `}>
                            <Check className="text-white p-0.5" />
                        </div>
                    </div>
                    <p className={`${currentStep > index + 1 ? 'text-gray-800' : currentStep == index + 1 ? 'text-gray-800' : 'text-fade'} text-xs md:text-sm whitespace-nowrap font-medium`}>{step}</p>
                </div>
            ))}
        </div>
    )
}