function MainComponent() { const [formValues, setFormValues] = React.useState({ jobType: '', preferredBrands: [], preferredAreas: [], employmentType: '', employmentHistory: '', startingWageType: '', startingWageAmount: '' }); const handleChange = (event)=>{ const { name, value } = event.target; if (name === "preferredBrands" || name === "preferredAreas") { setFormValues((prev)=>({ ...prev, [name]: value ? value.split(',') : [] })); } else { setFormValues((prev)=>({ ...prev, [name]: value })); } }; const handleSubmit = (event)=>{ event.preventDefault(); console.log(formValues); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[url('/truck-background.jpg')] bg-cover flex items-center justify-center", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "jobType", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Job Type"), /*#__PURE__*/ React.createElement("select", { name: "jobType", onChange: handleChange, value: formValues.jobType, className: "shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Choose a Job Type"), /*#__PURE__*/ React.createElement("option", { value: "local", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Local"), /*#__PURE__*/ React.createElement("option", { value: "overTheRoad", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Over the Road"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "preferredBrands", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Preferred Truck Brands (comma separated)"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "preferredBrands", onChange: handleChange, value: formValues.preferredBrands.join(','), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "preferredAreas", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Preferred Areas of Operation (comma separated)"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "preferredAreas", onChange: handleChange, value: formValues.preferredAreas.join(','), className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "employmentType", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Employment Type"), /*#__PURE__*/ React.createElement("select", { name: "employmentType", onChange: handleChange, value: formValues.employmentType, className: "shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Choose Employment Type"), /*#__PURE__*/ React.createElement("option", { value: "1099", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "1099"), /*#__PURE__*/ React.createElement("option", { value: "w2", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "W-2"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "employmentHistory", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Employment History"), /*#__PURE__*/ React.createElement("textarea", { name: "employmentHistory", onChange: handleChange, value: formValues.employmentHistory, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "startingWageType", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Desired Starting Wage Type"), /*#__PURE__*/ React.createElement("select", { name: "startingWageType", onChange: handleChange, value: formValues.startingWageType, className: "shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Choose Wage Type"), /*#__PURE__*/ React.createElement("option", { value: "perMile", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Per Mile"), /*#__PURE__*/ React.createElement("option", { value: "hourly", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Hourly"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "startingWageAmount", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Desired Starting Wage Amount"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "startingWageAmount", onChange: handleChange, value: formValues.startingWageAmount, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Submit")))); }