function MainComponent() { const [compliment, setCompliment] = useState(null); const [isLoading, setIsLoading] = useState(true); const [copied, setCopied] = useState(false); const fetchCompliment = async ()=>{ setIsLoading(true); try { const response = await fetch("/api/compliments/random", { method: "POST" }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); setCompliment(data.compliment); } catch (error) { console.error("Error fetching compliment:", error); } finally{ setIsLoading(false); } }; const copyCompliment = ()=>{ if (compliment?.text) { navigator.clipboard.writeText(compliment.text); setCopied(true); setTimeout(()=>setCopied(false), 2000); } }; useEffect(()=>{ fetchCompliment(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center p-5 bg-[#4A1D00]", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/f9ae82c1-60f0-49b2-abc3-a41c125d485d/-/format/auto/", alt: "FL Sites Logo", className: "w-24 h-24 object-contain", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-[#F5E6D3] mb-8 font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "Compliment Generator ✨"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#F5E6D3]/10 backdrop-blur-md p-6 md:p-8 rounded-xl shadow-lg max-w-2xl w-full mx-auto transition-all duration-300 hover:shadow-xl", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "min-h-[100px] flex items-center justify-center", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-[#F5E6D3] text-xl animate-pulse", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement("p", { className: "text-2xl md:text-3xl text-[#F5E6D3] mb-6 font-roboto animate-fade-in", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, compliment?.text)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-4 justify-center mt-6", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: fetchCompliment, className: "bg-[#F5E6D3] text-[#4A1D00] px-6 py-3 rounded-lg text-lg font-semibold hover:bg-[#E5D6C3] transition-colors duration-300", disabled: isLoading, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Another One! 🎲"), /*#__PURE__*/ React.createElement("button", { onClick: copyCompliment, className: "bg-[#F5E6D3] text-[#4A1D00] px-6 py-3 rounded-lg text-lg font-semibold hover:bg-[#E5D6C3] transition-colors duration-300", disabled: isLoading || !compliment, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, copied ? "Copied! ✓" : "Copy 📋"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.5s ease-out; } `)); }