function MainComponent() { const [selectedService, setSelectedService] = React.useState(''); const [zipcode, setZipcode] = React.useState(''); const [providers, setProviders] = React.useState([]); const services = [ { id: 1, name: 'Cleaning' }, { id: 2, name: 'Handyman' }, { id: 3, name: 'Landscaping' }, { id: 4, name: 'Plumbing' }, { id: 5, name: 'Electrical' } ]; const handleServiceChange = (e)=>{ setSelectedService(e.target.value); }; const handleZipcodeChange = (e)=>{ setZipcode(e.target.value); }; const handleSubmit = (e)=>{ e.preventDefault(); if (selectedService && zipcode) { const mockProviders = [ { id: 1, name: 'Provider A', rating: 4.5, price: 50 }, { id: 2, name: 'Provider B', rating: 4.2, price: 45 }, { id: 3, name: 'Provider C', rating: 4.8, price: 55 } ]; setProviders(mockProviders); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "HomeHelper Services"))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto mt-8 px-4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Find a Service Provider"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white rounded-lg shadow-md p-6 mb-8", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "service", className: "block mb-2 font-semibold", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Select a Service"), /*#__PURE__*/ React.createElement("select", { id: "service", name: "service", value: selectedService, onChange: handleServiceChange, className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Select a service"), services.map((service)=>/*#__PURE__*/ React.createElement("option", { key: service.id, value: service.name, __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, service.name)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "zipcode", className: "block mb-2 font-semibold", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Enter Zipcode"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "zipcode", name: "zipcode", value: zipcode, onChange: handleZipcodeChange, className: "w-full p-2 border rounded", placeholder: "Enter your zipcode", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 transition duration-300", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Search Providers")), providers.length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Available Providers"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, providers.map((provider)=>/*#__PURE__*/ React.createElement("div", { key: provider.id, className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, provider.name), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, "Rating: ", provider.rating, " ", /*#__PURE__*/ React.createElement("span", { className: "text-yellow-500", __source: { fileName: "", lineNumber: 84, columnNumber: 65 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star", __source: { fileName: "", lineNumber: 84, columnNumber: 99 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, "Price: $", provider.price, "/hour"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-600 text-white py-2 px-4 rounded hover:bg-green-700 transition duration-300", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, "Book Now")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-white mt-12 py-6", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "© 2023 HomeHelper. All rights reserved.")))); }