function MainComponent() { const [productName, setProductName] = React.useState(''); const [image, setImage] = React.useState(''); const [error, setError] = React.useState(''); const [searching, setSearching] = React.useState(false); const [productUrl, setProductUrl] = React.useState(''); const pdList = [ [ "AE-1634AR", "2369334O" ], [ "AE-2503", "2369328O" ], [ "DW-2474MT", "2369312O" ] ]; const baseUrl = 'https://multimedia.3m.com/mws/media/'; const handleInputChange = (e)=>{ setProductName(e.target.value); }; const handleSearch = ()=>{ setSearching(true); setError(''); setImage(''); const product = pdList.find((item)=>item[0].toLowerCase() === productName.toLowerCase()); if (product) { const url = `${baseUrl}${product[1]}/`; setProductUrl(url); fetch(url).then((response)=>{ if (response.ok) { setImage(url); } else { setError('Image not found.'); } }).catch(()=>{ setError('Image not found.'); }).finally(()=>{ setSearching(false); }); } else { setError('Image not found.'); setSearching(false); } }; const handleKeyDown = (e)=>{ if (e.key === 'Enter') { handleSearch(); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "3M DI-NOC Film Product Search"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md w-[300px] flex flex-col items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "productName", value: productName, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: "Enter Product Name", className: "mb-4 p-2 border border-gray-300 rounded w-full", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded w-full font-roboto", onClick: handleSearch, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Search")), searching && /*#__PURE__*/ React.createElement("div", { className: "mt-2 font-roboto flex flex-col items-center", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Searching...")), productUrl && !searching && !error && /*#__PURE__*/ React.createElement("div", { className: "mt-2 font-roboto flex flex-col items-center", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: productUrl, target: "_blank", rel: "noopener noreferrer", className: "text-blue-500", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, productUrl)), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-[300px] flex flex-col items-center", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, image && /*#__PURE__*/ React.createElement("img", { src: image, alt: `3M DI-NOC Film Product ${productName}`, className: "max-w-full max-h-[300px] mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 font-roboto", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, error))); }