function MainComponent() { const [joke, setJoke] = useState(""); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [heroImage, setHeroImage] = useState("https://ucarecdn.com/088e8aa3-02ab-45ba-843a-e51941a567ab/-/format/auto/"); const [imageError, setImageError] = useState(false); const [darkMode, setDarkMode] = useState(false); useEffect(()=>{ const savedDarkMode = localStorage.getItem("dadJokeDarkMode"); if (savedDarkMode) { setDarkMode(JSON.parse(savedDarkMode)); } const fetchHeroImage = async ()=>{ try { const response = await fetch("/api/get-asset", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: "Dad Joke Hero" }) }); const data = await response.json(); if (data.asset && data.asset.file_path) { setHeroImage(data.asset.file_path); } else if (data.error) { console.error("Error from API:", data.error); setImageError(true); } } catch (error) { console.error("Error fetching hero image:", error); setImageError(true); } }; fetchHeroImage(); }, []); const toggleDarkMode = ()=>{ const newDarkMode = !darkMode; setDarkMode(newDarkMode); localStorage.setItem("dadJokeDarkMode", JSON.stringify(newDarkMode)); }; const fetchJoke = async ()=>{ setIsLoading(true); setError(null); try { const response = await fetch("/api/get-dad-joke", { method: "POST" }); if (!response.ok) { throw new Error("Failed to fetch joke"); } const data = await response.json(); setJoke(data.joke); } catch (err) { setError("Oops! The joke machine needs a tune-up. Try again?"); console.error(err); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen font-roboto transition-colors duration-300 ${darkMode ? "bg-[#1e293b] text-white" : ""}`, style: { backgroundImage: darkMode ? "repeating-linear-gradient(45deg, #1e293b, #1e293b 10px, #0f172a 10px, #0f172a 20px)" : "repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f0f4f8 10px, #f0f4f8 20px)", backgroundAttachment: "fixed" }, __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto px-4 py-8 relative", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 z-10", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleDarkMode, className: `p-3 rounded-full shadow-lg transition-all duration-300 transform hover:scale-110 ${darkMode ? "bg-yellow-400 text-gray-900 hover:bg-yellow-300" : "bg-gray-800 text-yellow-400 hover:bg-gray-700"}`, "aria-label": darkMode ? "Switch to light mode" : "Switch to dark mode", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, darkMode ? /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this })) : /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z", __source: { fileName: "", lineNumber: 116, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("header", { className: "text-center mb-8 pt-4", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 relative", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: heroImage, alt: "Dad Joke Hero", className: `mx-auto h-40 md:h-48 ${darkMode ? "filter brightness-90" : ""} transition-all duration-300`, onError: ()=>{ if (!imageError) { setImageError(true); setHeroImage("https://ucarecdn.com/088e8aa3-02ab-45ba-843a-e51941a567ab/-/format/auto/"); } }, __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: `text-3xl md:text-4xl font-bold mb-3 ${darkMode ? "text-[#F9A825]" : "text-[#5D4037]"} transition-colors duration-300`, style: { fontFamily: "'Comic Sans MS', cursive, sans-serif" }, __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, "Dad Joke Generator"), /*#__PURE__*/ React.createElement("p", { className: `max-w-lg mx-auto ${darkMode ? "text-gray-300" : "text-[#64748b]"} transition-colors duration-300`, __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, "Need a laugh that'll make you groan? Click the button below for jokes that are so bad, they're dad.")), /*#__PURE__*/ React.createElement("div", { className: `max-w-md mx-auto p-6 rounded-lg border-2 border-dashed transition-all duration-300 ${darkMode ? "bg-[#2d3748] bg-opacity-30 border-[#F9A825]" : "bg-[#FFF9C4] bg-opacity-30 border-[#F9A825]"}`, __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: fetchJoke, disabled: isLoading, className: ` font-roboto px-6 py-3 rounded-lg transition-all duration-200 border-2 ${isLoading ? darkMode ? "bg-[#4a5568] cursor-wait border-[#F9A825]" : "bg-[#e2e8f0] cursor-wait border-[#5D4037]" : darkMode ? "bg-[#F9A825] hover:bg-[#F57F17] active:scale-95 border-[#F9A825] text-[#1e293b]" : "bg-[#F9A825] hover:bg-[#F57F17] active:scale-95 border-[#5D4037] text-[#5D4037]"} font-bold w-full md:w-auto flex items-center justify-center `, __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("span", { className: `inline-block w-4 h-4 border-2 border-t-transparent rounded-full animate-spin ${darkMode ? "border-[#F9A825]" : "border-[#5D4037]"}`, __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 193, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-wrench rotate-45 transform", __source: { fileName: "", lineNumber: 194, columnNumber: 19 }, __self: this })), "Hi Hungry, I'm Button")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-[#ef4444] font-roboto text-center", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, error), joke && !error && /*#__PURE__*/ React.createElement("div", { className: `mt-6 p-4 rounded-lg shadow-md opacity-0 animate-fade-in font-roboto border-l-4 transform rotate-1 ${darkMode ? "bg-[#2d3748] border-[#F9A825] text-white" : "bg-[#FFF9C4] border-[#F9A825] text-[#5D4037]"}`, style: { boxShadow: darkMode ? "2px 2px 5px rgba(0,0,0,0.5)" : "2px 2px 5px rgba(0,0,0,0.2)" }, __source: { fileName: "", lineNumber: 208, columnNumber: 13 }, __self: this }, joke), !joke && !error && /*#__PURE__*/ React.createElement("div", { className: `mt-6 text-center p-6 rounded-lg shadow-sm border transition-colors duration-300 ${darkMode ? "bg-[#2d3748] border-[#F9A825] text-gray-300" : "bg-[#FFF9C4] border-[#F9A825] text-[#5D4037]"}`, __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, "No jokes yet? That's im-pasta-ble! Click the button to get started!")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 239, columnNumber: 11 }, __self: this }, ` @keyframes fade-in { from { opacity: 0; transform: translateY(10px) rotate(1deg); } to { opacity: 1; transform: translateY(0) rotate(1deg); } } .animate-fade-in { animation: fade-in 0.3s ease-out forwards; } @keyframes lawn-mower { 0% { background-position: 0 0; } 100% { background-position: 20px 20px; } } .bg-lawn-pattern { background-image: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f0f4f8 10px, #f0f4f8 20px); animation: lawn-mower 2s linear infinite; } `)))); }