function MainComponent() { const [addedToCart, setAddedToCart] = React.useState(false); const addToCart = (e)=>{ e.preventDefault(); setAddedToCart(true); }; const buttonText = addedToCart ? "Added ✔️" : "Add to Cart"; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap items-center justify-center min-h-screen bg-[#fafafa]", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "m-4 w-full sm:w-auto", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-lg rounded-lg p-8 max-w-sm", onSubmit: addToCart, __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-24 h-24 rounded-full", src: "images/telegram-bot.jpg", alt: "Telegram Bot Illustration", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "mt-4 text-xl font-semibold text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, "Store Bot"), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#666] font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, "Your personal assistant to shop the best products right from Telegram."), /*#__PURE__*/ React.createElement("input", { type: "text", name: "product", placeholder: "Enter product name", className: "mt-4 w-full px-4 py-2 border rounded text-[#333] font-roboto", required: true, __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `mt-6 py-2 px-4 bg-[#0088cc] text-white rounded font-roboto ${addedToCart ? 'bg-[#006699]' : 'hover:bg-[#0077b5]'}`, __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, buttonText))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animation-fadeIn { animation: fadeIn 1s ease-in-out; } `)); }