function ImageGenerationButton({ text, onClick }) { return /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full p-2 bg-blue-500 text-white rounded font-roboto", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function ImageGenerationButtonStory() { const handleClick = ()=>alert("Button clicked!"); return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageGenerationButton, { text: "Generate Image", onClick: handleClick, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ImageGenerationButton, { text: "Create Photo", onClick: handleClick, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [generatedImage, setGeneratedImage] = React.useState(''); const [keyword, setKeyword] = React.useState(''); const [posts, setPosts] = React.useState([]); const handleGenerateImage = async (event)=>{ event.preventDefault(); // AI image generation logic should be here const newImage = '/path/to/generated-image.jpg'; // Replace this with actual generated image path setGeneratedImage(newImage); }; const handleShare = ()=>{ const newPost = { id: posts.length + 1, user: 'User Name', image: generatedImage, text: `This is a post with an AI-generated image based on keyword: ${keyword}` }; setPosts([ ...posts, newPost ]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center bg-white p-4 shadow", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "AI SNS Service"), /*#__PURE__*/ React.createElement("nav", { className: "space-x-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Settings"))), /*#__PURE__*/ React.createElement("main", { className: "mt-6", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md max-w-md mx-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Generate Image with AI"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleGenerateImage, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "keyword", value: keyword, onChange: (e)=>setKeyword(e.target.value), className: "w-full p-2 border border-gray-300 rounded", placeholder: "Enter a keyword", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(ImageGenerationButton, { text: "Generate Image", onClick: handleGenerateImage, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })), generatedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "Generated based on keyword", className: "w-full max-w-xs mx-auto rounded shadow-md", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-between", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleShare, className: "bg-green-500 text-white p-2 rounded font-roboto flex items-center space-x-2", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-share", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 55, columnNumber: 46 }, __self: this }, "Share")))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 max-w-md mx-auto space-y-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "bg-white p-4 rounded shadow-md", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-4", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/user.jpg", alt: "User thumbnail", className: "w-[40px] h-[40px] rounded-full", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-bold", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, post.user), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, post.text), /*#__PURE__*/ React.createElement("img", { src: post.image, alt: "User shared AI generated", className: "mt-2 rounded shadow-md", __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex space-x-4", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 font-roboto flex items-center space-x-2", __source: { fileName: "", lineNumber: 70, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-thumbs-up", __source: { fileName: "", lineNumber: 71, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 71, columnNumber: 58 }, __self: this }, "Like")), /*#__PURE__*/ React.createElement("button", { className: "text-red-500 font-roboto flex items-center space-x-2", __source: { fileName: "", lineNumber: 73, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-heart", __source: { fileName: "", lineNumber: 74, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 74, columnNumber: 54 }, __self: this }, "Favorite")), /*#__PURE__*/ React.createElement("button", { className: "text-green-500 font-roboto flex items-center space-x-2", __source: { fileName: "", lineNumber: 76, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-comment", __source: { fileName: "", lineNumber: 77, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 77, columnNumber: 56 }, __self: this }, "Comment")))))))))); }