function MainComponent() { const [pins, setPins] = React.useState([]); const [savedPins, setSavedPins] = React.useState([]); const [filter, setFilter] = React.useState(''); const [darkMode, setDarkMode] = React.useState(false); const filterTags = [ 'All', 'Design', 'Photography', 'Architecture', 'Art', 'DIY' ]; const toggleDarkMode = ()=>{ setDarkMode(!darkMode); }; const handleFilterChange = (tag)=>{ setFilter(tag); }; const handleSavePin = (pin)=>{ if (!savedPins.find((savedPin)=>savedPin.id === pin.id)) { setSavedPins([ ...savedPins, pin ]); } else { setSavedPins(savedPins.filter((savedPin)=>savedPin.id !== pin.id)); } }; const displayPins = pins.filter((pin)=>pin.title.includes(filter) || filter === 'All'); return /*#__PURE__*/ React.createElement("div", { className: darkMode ? 'bg-[#121212] text-white' : 'bg-white text-[#121212]', __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between p-5", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, filterTags.map((tag)=>/*#__PURE__*/ React.createElement("button", { key: tag, name: tag, className: "bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 font-semibold", onClick: ()=>handleFilterChange(tag), __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, tag))), /*#__PURE__*/ React.createElement("button", { name: "darkModeToggle", className: "bg-gray-200 dark:bg-gray-700 rounded-full p-2", onClick: toggleDarkMode, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, darkMode ? '☀️' : '🌙')), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-5", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, displayPins.map((pin)=>/*#__PURE__*/ React.createElement("div", { key: pin.id, className: "shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: pin.imageUrl, alt: `Creative image showcasing ${pin.title}`, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, pin.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-1", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, pin.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-3", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSavePin(pin), __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, savedPins.find((savedPin)=>savedPin.id === pin.id) ? '💔 Unsave' : '❤️ Save')))))), /*#__PURE__*/ React.createElement("div", { className: "p-5", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl mb-3", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Your Saved Pins"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, savedPins.map((pin)=>/*#__PURE__*/ React.createElement("div", { key: pin.id, className: "shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: pin.imageUrl, alt: `Creative image saved by the user, titled ${pin.title}`, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, pin.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-1", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, pin.description), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSavePin(pin), className: "mt-3", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, "💔 Unsave")))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, ` /* Scrollbar styles */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: ${darkMode ? '#121212' : '#f1f1f1'}; } ::-webkit-scrollbar-thumb { background: ${darkMode ? '#424242' : '#888'}; } ::-webkit-scrollbar-thumb:hover { background: ${darkMode ? '#535353' : '#555'}; } `)); }