function MainComponent() { const [isDictating, setIsDictating] = React.useState(false); const handleDictationToggle = ()=>{ setIsDictating(!isDictating); }; const handleSubmit = (event)=>{ event.preventDefault(); // Logic to send email should be implemented here }; const dictationButtonClasses = isDictating ? "px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600" : "px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-[#00000080] flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "Compose Email"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4 mt-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "to", className: "block text-sm font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "To"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "to", id: "to", className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 font-roboto", placeholder: "Recipient's email", required: true, __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "subject", className: "block text-sm font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Subject"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "subject", id: "subject", className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 font-roboto", placeholder: "Email subject", required: true, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block text-sm font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Message"), /*#__PURE__*/ React.createElement("textarea", { name: "message", id: "message", rows: "6", className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 font-roboto", placeholder: "Your message here...", required: true, __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-[#121212] bg-[#f1f3f4] hover:bg-[#e0e0e0]", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Send Email"))), /*#__PURE__*/ React.createElement("button", { type: "button", className: "absolute top-0 right-0 mt-4 mr-4 text-2xl text-[#121212] hover:text-[#f00]", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "×")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fixed.inset-0 { animation: fadeIn 0.3s ease-in-out; } `)); }