function InventoryCloseButton({ onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "mt-4 px-4 py-2 bg-[#323232] text-[#FFD700] font-crimson-text w-full", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Close"); } function InventoryCloseButtonStory() { const handleClick = ()=>alert('Close button clicked'); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(InventoryCloseButton, { onClick: handleClick, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function InventoryPanel({ items, onItemSelect, selectedItem, onClose, onEquip, onUse, onDiscard }) { const renderGridItems = items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative border-2 border-[#FFD700] p-2", onClick: ()=>onItemSelect(item), __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.icon, alt: `Icon of ${item.name}`, className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }))); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#322B28] p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-2", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, renderGridItems), selectedItem && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FBF0D9] p-4 max-w-sm w-full border-2 border-[#4B4B4B]", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-2xl mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, selectedItem.name), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, selectedItem.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#323232] text-[#FFD700] font-crimson-text", onClick: onEquip, __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "Equip"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#323232] text-[#FFD700] font-crimson-text", onClick: onUse, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Use"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#323232] text-[#FFD700] font-crimson-text", onClick: onDiscard, __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Discard")), /*#__PURE__*/ React.createElement(InventoryCloseButton, { onClick: onClose, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })))); } function InventoryPanelStory() { const mockItems = [ { name: 'Sword of Destiny', icon: '/icons/sword.png', description: 'A powerful sword imbued with magic.' }, { name: 'Healing Potion', icon: '/icons/potion.png', description: 'Restores health when used.' }, { name: 'Shield of Valor', icon: '/icons/shield.png', description: 'Provides excellent protection.' }, { name: 'Magic Scroll', icon: '/icons/scroll.png', description: 'Contains a powerful spell.' } ]; const [selectedItem, setSelectedItem] = React.useState(null); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(InventoryPanel, { items: mockItems, onItemSelect: setSelectedItem, selectedItem: selectedItem, onClose: ()=>setSelectedItem(null), onEquip: ()=>alert('Equip'), onUse: ()=>alert('Use'), onDiscard: ()=>alert('Discard'), __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); } function MainComponent({ items, onItemSelect, selectedItem, onClose, onEquip, onUse, onDiscard }) { return /*#__PURE__*/ React.createElement(InventoryPanel, { items: items, onItemSelect: onItemSelect, selectedItem: selectedItem, onClose: onClose, onEquip: onEquip, onUse: onUse, onDiscard: onDiscard, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function StoryComponent() { const mockItems = [ { name: 'Sword of Destiny', icon: '/icons/sword.png', description: 'A powerful sword imbued with magic.' }, { name: 'Healing Potion', icon: '/icons/potion.png', description: 'Restores health when used.' }, { name: 'Shield of Valor', icon: '/icons/shield.png', description: 'Provides excellent protection.' }, { name: 'Magic Scroll', icon: '/icons/scroll.png', description: 'Contains a powerful spell.' } ]; const [selectedItem, setSelectedItem] = React.useState(null); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { items: mockItems, onItemSelect: setSelectedItem, selectedItem: selectedItem, onClose: ()=>setSelectedItem(null), onEquip: ()=>alert('Equip'), onUse: ()=>alert('Use'), onDiscard: ()=>alert('Discard'), __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this })); }