function MainComponent() { const [collectibles, setCollectibles] = React.useState([ { name: 'Loqp', price: '2.00', imageUrl: './images/pink-car.png', category: 'Cars' }, { name: 'Eorsto', price: '11.99', imageUrl: './images/blue-car.png', category: 'Cars' }, { name: 'Vitthe', price: '23.96', imageUrl: './images/teddy-bear.png', category: 'Toys' }, { name: 'Wrhanqs', price: '29.99', imageUrl: './images/black-car.png', category: 'Cars' }, { name: 'Ganstcle', price: '23.69', imageUrl: './images/minifig-female.png', category: 'LEGO' }, { name: 'Duskog', price: '213.09', imageUrl: './images/minifig-male.png', category: 'LEGO' }, { name: 'Pocle', price: '9.99', imageUrl: './images/blue-car-transformed.png', category: 'Transformers' }, { name: 'Lego', price: '42.69', imageUrl: './images/lego-blocks.png', category: 'LEGO' } ]); const [selectedCategory, setSelectedCategory] = React.useState(''); const [uploadImage, setUploadImage] = React.useState(''); const handleCategoryChange = (category)=>{ setSelectedCategory(category); }; const handleImageUpload = (event)=>{ const file = event.target.files[0]; if (file) { setUploadImage(URL.createObjectURL(file)); } }; const filteredCollectibles = selectedCategory ? collectibles.filter((collectible)=>collectible.category === selectedCategory) : collectibles; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-3 px-4 flex justify-between items-center bg-[#F8F9FA]", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, [ 'All', 'LEGO', 'Cars', 'Toys', 'Transformers' ].map((category)=>/*#__PURE__*/ React.createElement("button", { key: category, className: `font-roboto text-xs px-3 py-1 rounded ${selectedCategory === category || selectedCategory === '' && category === 'All' ? 'bg-blue-200' : 'bg-gray-200'}`, onClick: ()=>handleCategoryChange(category === 'All' ? '' : category), __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, category))), /*#__PURE__*/ React.createElement("label", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload text-blue-500", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "imageUpload", className: "hidden", onChange: handleImageUpload, accept: "image/*", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "px-4 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, filteredCollectibles.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded p-2 flex flex-col items-center shadow", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.imageUrl, alt: `${item.name} collectible`, className: "h-[100px] w-full object-cover", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-[#495057] font-roboto text-xs mt-2", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("div", { className: "text-[#212529] font-roboto font-bold text-lg", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, "$ ", item.price))), uploadImage && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded p-2 flex flex-col items-center shadow", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: uploadImage, alt: "Uploaded collectible", className: "h-[100px] w-full object-cover", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 font-roboto text-xs mt-2", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Uploaded Image Preview")))), /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow p-4 text-center", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 font-roboto text-lg", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-bar", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this })))); }