function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(''); const [results, setResults] = React.useState([]); const handleSearchChange = (event)=>{ setSearchTerm(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); fetch(`https://api.example.com/search?query=${encodeURIComponent(searchTerm)}`).then((response)=>response.json()).then((data)=>{ setResults(data.results); }); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#FAFAFA] min-h-screen flex items-center justify-center", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-xl w-[90%] max-w-[600px]", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl text-[#333333] mb-6", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Find Your Dress 👗"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "search", className: "block font-roboto text-[#555] mb-2", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Search for a dress"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", id: "search", placeholder: "Type something...", className: "w-full p-4 border rounded-md mb-4", value: searchTerm, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#007BFF] text-white p-4 rounded-md hover:bg-[#0069D9]", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, results.map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 mb-4 bg-[#E9ECEF] rounded-md", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl text-[#000] mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, result.name), /*#__PURE__*/ React.createElement("img", { src: result.image, alt: `${result.name} dress`, className: "w-full h-auto rounded-md mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#555]", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, result.description)))))); }