function MainComponent() { const [selectedCollection, setSelectedCollection] = React.useState(''); const [checkedImages, setCheckedImages] = React.useState(Array.from({ length: 8 }).fill(false)); const [showFilters, setShowFilters] = React.useState(false); function toggleFilterVisibility() { setShowFilters(!showFilters); } function handleCheckboxChange(index) { setCheckedImages(checkedImages.map((item, i)=>i === index ? !item : item)); } const filterClass = showFilters ? 'translate-x-0 ease-out' : 'translate-x-full ease-in'; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white py-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-xl font-bold", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Trading Card Collection")), /*#__PURE__*/ React.createElement("nav", { className: "flex justify-center space-x-4 bg-white py-2 shadow-md", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, [ 'Pokemon', 'Magic: The Gathering', 'Yu-Gi-Oh!', 'Sports', 'Others' ].map((category)=>/*#__PURE__*/ React.createElement("button", { key: category, className: `text-blue-600 ${selectedCollection === category ? 'font-bold' : ''}`, onClick: ()=>setSelectedCollection(category), __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, category))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, Array.from({ length: 8 }, (_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "relative group", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `/path/to/image/${i}.jpg`, alt: `Card ${i}`, className: `w-full h-48 object-cover ${checkedImages[i] ? 'opacity-100' : 'opacity-50 hover:opacity-100'}`, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "absolute top-2 left-2", checked: checkedImages[i], onChange: ()=>handleCheckboxChange(i), __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("aside", { className: `fixed inset-y-0 right-0 w-64 bg-white p-4 shadow-lg transition-transform duration-300 ${filterClass}`, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search cards", className: "p-2 border rounded", name: "search", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "checked_only", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Checked items only"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "filter_by_set", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Filter by set")))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 p-2 bg-blue-500 text-white rounded", onClick: toggleFilterVisibility, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Apply Filters"))); }