function OutlinedButtonDesign({ text, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "font-open-sans uppercase tracking-widest border border-black bg-transparent text-black py-2 px-4 rounded-[4px] transition-colors hover:bg-white hover:text-black hover:border-black focus:outline-none focus:ring-2 focus:ring-black focus:ring-opacity-50", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function OutlinedButtonDesignStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(OutlinedButtonDesign, { text: "Click Me", onClick: ()=>alert('Button clicked!'), __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(OutlinedButtonDesign, { text: "Submit", onClick: ()=>alert('Submitted!'), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(OutlinedButtonDesign, { text: "Cancel", onClick: ()=>alert('Cancelled!'), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function GradientCirclesBackground() { return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen overflow-hidden bg-[#F8F6F0]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-[150vw] h-[150vw] md:w-[1369px] md:h-[846px] left-[-50vw] md:left-[-339px] bottom-[-50vw] md:top-[497px] bg-[#FF514E] rounded-full filter blur-[100px] md:blur-[150px]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[150vw] h-[150vw] md:w-[1081px] md:h-[846px] right-[-50vw] md:left-[778px] bottom-[-50vw] md:top-[457px] bg-[#FEA452] rounded-full filter blur-[100px] md:blur-[150px]", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this })); } function GradientCirclesBackgroundStory() { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen md:w-[1440px] md:h-[1024px]", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GradientCirclesBackground, { __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function MainComponent() { const [posts, setPosts] = React.useState([]); const [newPost, setNewPost] = React.useState(''); const handlePostSubmit = (e)=>{ e.preventDefault(); if (newPost.trim()) { setPosts([ { id: Date.now(), content: newPost, likes: 0 }, ...posts ]); setNewPost(''); } }; const handleLike = (id)=>{ setPosts(posts.map((post)=>post.id === id ? { ...post, likes: post.likes + 1 } : post)); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-500 text-white p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "X-like SNS")), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handlePostSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "newPost", value: newPost, onChange: (e)=>setNewPost(e.target.value), className: "w-full p-2 border border-gray-300 rounded", placeholder: "What's happening?", rows: "3", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-2 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "投稿")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement("div", { key: post.id, className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, post.content), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleLike(post.id), className: "text-gray-500 hover:text-blue-500", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart mr-1", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }), " ", post.likes)))))); }