function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(""); const [filteredParts, setFilteredParts] = React.useState([]); const [showResults, setShowResults] = React.useState(false); const partsDatabase = [ { id: 1, name: "Bolt", parameters: "10mm steel" }, { id: 2, name: "Screw", parameters: "5mm alloy" }, { id: 3, name: "Nut", parameters: "8mm bronze" } ]; const handleSearchChange = (event)=>{ setSearchTerm(event.target.value); }; const handleSearch = ()=>{ setFilteredParts(partsDatabase.filter((part)=>part.parameters.toLowerCase().includes(searchTerm.toLowerCase()))); setShowResults(true); }; const handleClose = ()=>{ setShowResults(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f2f2f2] flex flex-col items-center pt-10 font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Part Search Tool"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchTerm, onChange: handleSearchChange, placeholder: "Search parts by parameters", className: "p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Search")), showResults && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow p-4 w-full max-w-[500px] rounded-md", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleClose, className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Close"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, filteredParts.map((part)=>/*#__PURE__*/ React.createElement("li", { key: part.id, className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, part.name), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, part.parameters)))))); }