function CoffeeThemedSocialPage({ tweetPlaceholder, userProfilePic, username, userhandle, tweetContent }) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#15202B] text-white font-roboto flex flex-col items-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#1DA1F2] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Twitter Clone"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home", __source: { fileName: "", lineNumber: 7, columnNumber: 43 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hashtag", __source: { fileName: "", lineNumber: 8, columnNumber: 43 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell", __source: { fileName: "", lineNumber: 9, columnNumber: 43 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope", __source: { fileName: "", lineNumber: 10, columnNumber: 43 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl p-4 flex-1", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#192734] p-4 rounded", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "tweet", className: "w-full p-2 bg-[#15202B] rounded border border-[#38444D] focus:border-[#1DA1F2] focus:outline-none", placeholder: tweetPlaceholder, rows: "3", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-2", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] hover:bg-[#1A91DA] text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "Tweet"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-[#192734] p-4 rounded", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: userProfilePic, alt: "User profile picture", className: "w-[50px] h-[50px] rounded-full", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, username), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#8899A6]", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "@", userhandle))), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, tweetContent), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex justify-between text-[#8899A6]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-comment", __source: { fileName: "", lineNumber: 39, columnNumber: 45 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(RetweetIcon, { color: "text-[#1DA1F2]", __source: { fileName: "", lineNumber: 40, columnNumber: 45 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-heart", __source: { fileName: "", lineNumber: 41, columnNumber: 45 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share", __source: { fileName: "", lineNumber: 42, columnNumber: 45 }, __self: this })))))); } ; function CoffeeThemedSocialPageStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CoffeeThemedSocialPage, { tweetPlaceholder: "What's happening?", userProfilePic: "/path/to/profile.jpg", username: "Username", userhandle: "userhandle", tweetContent: "This is a sample tweet. #example", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); } function RetweetIcon({ size = "text-xl", color = "text-black" }) { return /*#__PURE__*/ React.createElement("div", { className: `flex justify-center items-center ${size} ${color}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-retweet", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, ` @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .rotate-clockwise { animation: rotate 2s linear infinite; } `)); } function RetweetIconStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RetweetIcon, { size: "text-2xl", color: "text-green-500", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(RetweetIcon, { size: "text-4xl", color: "text-blue-500", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(RetweetIcon, { size: "text-6xl", color: "text-red-500", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CoffeeThemedSocialPage, { tweetPlaceholder: "What's happening?", userProfilePic: "/path/to/profile.jpg", username: "Username", userhandle: "userhandle", tweetContent: "This is a sample tweet. #example", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); }