function MainComponent() { const [announcement, setAnnouncement] = React.useState(''); const [jobTitleError, setJobTitleError] = React.useState(''); const [companyUrlError, setCompanyUrlError] = React.useState(''); async function handleSubmit(e) { e.preventDefault(); const formData = new FormData(e.target); let companyUrl = formData.get('companyUrl'); let jobTitle = formData.get('jobTitle'); const jobDescription = formData.get('jobDescription'); if (!jobTitle.trim()) { setJobTitleError('Job title is required'); return; } else { setJobTitleError(''); } if (!isValidHttpUrl(companyUrl)) { setCompanyUrlError('Please enter a valid URL'); return; } else { setCompanyUrlError(''); } const generatedAnnouncement = `We are thrilled to announce an opening for the position of ${jobTitle} at our company. As an organization that prides itself on our strict code of conduct, visionary leadership, and commitment to innovation, we are seeking a candidate who can contribute to our company's growth and embodies our values. For more details, please visit our homepage: ${companyUrl}`; setAnnouncement(generatedAnnouncement); } function validateJobTitle(e) { const inputVal = e.target.value; if (!inputVal.trim()) { setJobTitleError('Job title is required'); } else { setJobTitleError(''); } } function validateCompanyUrl(e) { const inputVal = e.target.value; if (!isValidHttpUrl(inputVal)) { setCompanyUrlError('Please enter a valid URL'); } else { setCompanyUrlError(''); } } function isValidHttpUrl(string) { let url; try { url = new URL(string); } catch (_) { return false; } return url.protocol === "http:" || url.protocol === "https:"; } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F7F9FC] flex flex-col items-center justify-center p-4 gap-10", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl bg-white shadow-lg rounded-lg p-8", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-semibold text-center text-[#1A202C] mb-8 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Professional Job Announcement Generator"), /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "companyUrl", className: "text-lg font-roboto text-[#1A202C]", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Company Homepage URL"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "companyUrl", placeholder: "https://example.com", onChange: validateCompanyUrl, className: `mt-2 w-full p-4 border rounded-md text-[#1A202C] font-roboto ${companyUrlError ? 'border-red-500' : 'border-gray-300'}`, required: true, __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }), companyUrlError && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-red-600 font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, companyUrlError)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "jobTitle", className: "text-lg font-roboto text-[#1A202C]", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Job Title"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "jobTitle", placeholder: "Enter job title", onChange: validateJobTitle, className: `mt-2 w-full p-4 border rounded-md text-[#1A202C] font-roboto ${jobTitleError ? 'border-red-500' : 'border-gray-300'}`, required: true, __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }), jobTitleError && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-red-600 font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, jobTitleError)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "jobDescription", className: "text-lg font-roboto text-[#1A202C]", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Job Description"), /*#__PURE__*/ React.createElement("textarea", { name: "jobDescription", placeholder: "Enter a brief description of the job...", className: "mt-2 w-full p-4 border rounded-md text-[#1A202C] font-roboto", rows: "4", required: true, __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-4 bg-[#4F46E5] text-white rounded-md font-semibold font-roboto hover:bg-[#4338CA]", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Generate Announcement"))), announcement && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl p-4 mt-4 bg-white shadow-lg rounded-lg font-roboto text-[#1A202C]", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, "Generated Job Announcement"), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-line", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, announcement))); }