function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(''); const [selectedCity, setSelectedCity] = React.useState(''); const handleSearchChange = (e)=>{ setSearchTerm(e.target.value); }; const handleCityChange = (e)=>{ setSelectedCity(e.target.value); }; const jobTypes = [ { title: 'Software Developer', description: 'Create and maintain software applications.' }, { title: 'Graphic Designer', description: 'Design appealing graphics and visual layouts.' }, { title: 'Data Analyst', description: 'Interpret and analyze data patterns.' } ]; const cities = [ 'New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix', 'Sulaimanyiah' ]; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center justify-center p-6", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Find Job Opportunities"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchTerm, onChange: handleSearchChange, className: "border border-gray-300 p-2 rounded-md", placeholder: "Search for jobs...", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "city", value: selectedCity, onChange: handleCityChange, className: "border border-gray-300 p-2 rounded-md", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Select a city"), cities.map((city)=>/*#__PURE__*/ React.createElement("option", { key: city, value: city, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, city)))), /*#__PURE__*/ React.createElement("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, jobTypes.map((job, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-gray-300 p-4 rounded-lg hover:shadow-md", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, job.title), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, job.description))))); }