trustingMacaw4/bedtime-story-generator

1import type React from "react";2 3interface ProgressScreenProps {4  progress: number;5  isVisible: boolean;6}7 8const ProgressScreen: React.FC<ProgressScreenProps> = ({ progress, isVisible }) => {9  const transitionClass = isVisible ? "opacity-100" : "opacity-0 pointer-events-none";10  return (11    <div12      className={`absolute inset-0 flex flex-col items-center justify-center transition-opacity duration-500 ${transitionClass}`}13    >14      <div className="w-full max-w-md text-center">15        <h2 className="text-3xl font-bold mb-4">Warming up the magic...</h2>16        <div className="w-full bg-white border-2 border-black rounded-full p-1 shadow-[4px_4px_0px_#000]">17          <div className="bg-pink-400 h-6 rounded-full" style={{ width: `${progress}%` }} />18        </div>19        <p className="mt-2 text-lg font-semibold">{progress.toFixed(2)}%</p>20      </div>21    </div>22  );23};24 25export default ProgressScreen;26