function DarkThemedTweetList({ tweets }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center py-5", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, tweets.map((tweet)=>/*#__PURE__*/ React.createElement("div", { key: tweet.id, className: "w-full max-w-[600px] bg-[#333333] text-white shadow rounded p-4 mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-sm", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, tweet.username), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, tweet.timestamp)), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, tweet.content)))); } function DarkThemedTweetListStory() { const sampleTweets = [ { id: 1, username: "User1", timestamp: "10 mins ago", content: "Hello world! This is my first tweet." }, { id: 2, username: "User2", timestamp: "8 mins ago", content: "Exciting to be here on this platform!" }, { id: 3, username: "User3", timestamp: "5 mins ago", content: "Does anyone want to hang out?" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DarkThemedTweetList, { tweets: sampleTweets, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); } function TimelineLayout({ title, children, className }) { const baseStyle = "min-h-screen font-roboto " + className; return /*#__PURE__*/ React.createElement("div", { className: baseStyle, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full p-5 bg-[#1DA1F2]", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl text-white", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, title)), children); } function TimelineLayoutStory() { const tweets = [ { id: 1, content: "Hello Twitter!" }, { id: 2, content: "Learning React is fun!" }, { id: 3, content: "How do you manage state in your apps?" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TimelineLayout, { title: "Twitterクローン", className: "bg-[#1A1A1A]", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MainComponent() { const tweets = [ { id: 1, username: "@user1", content: "Hello Twitter!", timestamp: "10m" }, { id: 2, username: "@user2", content: "Another tweet here.", timestamp: "30m" } ]; return /*#__PURE__*/ React.createElement(TimelineLayout, { title: "Twitterクローン", className: "bg-[#1A1A1A]", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DarkThemedTweetList, { tweets: tweets, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); }