trustingMacaw4/bedtime-story-generator

1import type React from "react";2import { AlertTriangle } from "lucide-react";3import NeoButton from "./NeoButton";4 5interface ErrorScreenProps {6  isVisible: boolean;7  error: string | null;8  onRetry: () => void;9}10 11const ErrorScreen: React.FC<ErrorScreenProps> = ({ isVisible, error, onRetry }) => {12  const transitionClass = isVisible ? "opacity-100" : "opacity-0 -translate-y-10 pointer-events-none";13  return (14    <div15      className={`absolute inset-0 flex flex-col items-center justify-center transition-all duration-700 ease-in-out ${transitionClass}`}16    >17      <div className="text-center p-4 max-w-2xl">18        <h1 className="text-4xl md:text-6xl font-black tracking-tighter mb-6 animate-sway text-red-500">19          <AlertTriangle className="inline-block h-16 w-16 md:h-24 md:w-24 mb-4" />20          <br />21          An Error Occurred22        </h1>23        {error && (24          <div className="bg-red-100 border-2 border-red-400 text-red-700 px-4 py-3 rounded-lg relative mb-8 text-left">25            <strong className="font-bold">Details:</strong>26            <span className="block sm:inline ml-2">{error}</span>27          </div>28        )}29        <NeoButton onClick={onRetry} className="text-2xl px-8 py-4" variant="secondary">30          Try Again31        </NeoButton>32      </div>33    </div>34  );35};36 37export default ErrorScreen;38