function NftTicketModal({ isVisible, selectedNft, closeModal, handleBuyNow }) { if (!isVisible) return null; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative bg-white p-8 rounded shadow-md w-[90%] max-w-[500px]", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 right-4 text-gray-500", onClick: closeModal, __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "x"), /*#__PURE__*/ React.createElement("img", { src: selectedNft.image, alt: `${selectedNft.name} large image`, className: "w-full h-[300px] object-cover mb-4 rounded", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#333333] mb-2", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, selectedNft.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#777777] mb-4", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, selectedNft.description), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleBuyNow(selectedNft.name), className: "bg-blue-500 text-white px-4 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Buy Now"))); } function NftTicketModalStory() { const sampleNft = { image: "path/to/nft-image.jpg", name: "NFT Tourist Ticket", description: "This is a unique NFT representing a tourist ticket." }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NftTicketModal, { isVisible: true, selectedNft: sampleNft, closeModal: ()=>console.log('Close modal'), handleBuyNow: (name)=>console.log(`Buy Now clicked for ${name}`), __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedNft, setSelectedNft] = React.useState(null); const [isModalVisible, setIsModalVisible] = React.useState(false); const [isTransitionVisible, setIsTransitionVisible] = React.useState(true); React.useEffect(()=>{ const timer = setTimeout(()=>{ setIsTransitionVisible(false); }, 3000); return ()=>clearTimeout(timer); }, []); const handleBuyNow = (nftName)=>{ alert(`${nftName} has been purchased!`); setIsModalVisible(false); }; const openModal = (nft)=>{ setSelectedNft(nft); setIsModalVisible(true); }; const closeModal = ()=>{ setIsModalVisible(false); }; const nfts = [ { image: "relative/path/to/nft1.jpg", name: "NFT 1", description: "This is the description of NFT 1." }, { image: "relative/path/to/nft2.jpg", name: "NFT 2", description: "This is the description of NFT 2." }, { image: "relative/path/to/nft3.jpg", name: "NFT 3", description: "This is the description of NFT 3." } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, isTransitionVisible && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-white flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-center text-[#333333]", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "日本の観光業を世界に")), /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md p-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto text-[#333333]", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "NFTマーケット"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#555555]", __source: { fileName: "", lineNumber: 46, columnNumber: 51 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#555555]", __source: { fileName: "", lineNumber: 47, columnNumber: 51 }, __self: this }, "Explore")), /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#555555]", __source: { fileName: "", lineNumber: 48, columnNumber: 51 }, __self: this }, "Profile")), /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#555555]", __source: { fileName: "", lineNumber: 49, columnNumber: 51 }, __self: this }, "Create")))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto py-8", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "mb-8", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#333333] mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Categories"), /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-xl text-[#555555]", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "rounded-full p-4 bg-gray-200", __source: { fileName: "", lineNumber: 59, columnNumber: 64 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "relative/path/to/all.png", alt: "all category illustration", className: "w-[50px] h-[50px]", __source: { fileName: "", lineNumber: 59, columnNumber: 113 }, __self: this }))), /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-xl text-[#555555]", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "rounded-full p-4 bg-gray-200", __source: { fileName: "", lineNumber: 60, columnNumber: 64 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "relative/path/to/tourism.png", alt: "tourism category illustration", className: "w-[50px] h-[50px]", __source: { fileName: "", lineNumber: 60, columnNumber: 113 }, __self: this }))), /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-xl text-[#555555]", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "rounded-full p-4 bg-gray-200", __source: { fileName: "", lineNumber: 61, columnNumber: 64 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "relative/path/to/event.png", alt: "event category illustration", className: "w-[50px] h-[50px]", __source: { fileName: "", lineNumber: 61, columnNumber: 113 }, __self: this }))), /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-xl text-[#555555]", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "rounded-full p-4 bg-gray-200", __source: { fileName: "", lineNumber: 62, columnNumber: 64 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "relative/path/to/art.png", alt: "art category illustration", className: "w-[50px] h-[50px]", __source: { fileName: "", lineNumber: 62, columnNumber: 113 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, nfts.map((nft)=>/*#__PURE__*/ React.createElement("div", { key: nft.name, className: "bg-white p-4 rounded shadow-md", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: nft.image, alt: `${nft.name} ticket image`, className: "w-full h-[250px] object-cover mb-4 rounded", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#333333] mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, nft.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#777777]", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, nft.description), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>openModal(nft), className: "bg-blue-500 text-white px-4 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "詳細を見る")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white shadow-md p-4", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#555555]", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "© 2023 NFT Marketplace. All rights reserved."))), /*#__PURE__*/ React.createElement(NftTicketModal, { isVisible: isModalVisible, selectedNft: selectedNft, closeModal: closeModal, handleBuyNow: handleBuyNow, __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this })); }