outline-mobile/src/components/StepItem.tsx

export type StepName =
  | 'left_ready'
  | 'left_begin'
  | 'left_end'
  | 'right_ready'
  | 'right_begin'
  | 'right_end';

export type StepState = 'none' | 'ongoing' | 'done';

export default function StepItem({ state = 'none', text }: { state: StepState; text: string }) {
  return (
    <div className="flex items-center px-4 h-10 bg-white rounded gap-3">
      <div
        className={`rounded-full w-[14px] h-[14px] flex justify-center items-center ${
          state === 'done'
            ? 'bg-[#52C41A]/[0.35]'
            : state === 'ongoing'
            ? 'bg-[#187ef9]/[0.35]'
            : 'bg-[#c0c0c0]/[0.35]'
        }`}
      >
        <div
          className={`rounded-full w-[10px] h-[10px] ${
            state === 'done'
              ? 'bg-[#52C41A]'
              : state === 'ongoing'
              ? 'bg-[#187ef9]'
              : 'bg-[#c0c0c0]'
          }`}
        ></div>
      </div>
      <p>{text}</p>
    </div>
  );
}