function ShareInputField({ placeholder = "What's on your mind?", name }) { return /*#__PURE__*/ React.createElement("textarea", { name: name, placeholder: placeholder, className: "w-full p-2 border border-gray-300 rounded mt-1", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ShareInputFieldStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ShareInputField, { name: "postContent", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#EDE7F6]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#7E57C2] p-4 text-white font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Wupe")), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg text-[#7E57C2] font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("button", { className: "px-1 py-1 bg-[#7E57C2] text-white rounded text-[10px]", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "Follow")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-start space-x-2 mt-2", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-2 py-1 bg-[#7E57C2] text-white rounded text-xs", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, "Like"), /*#__PURE__*/ React.createElement("button", { className: "px-2 py-1 bg-[#7E57C2] text-white rounded text-xs", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "Comment"), /*#__PURE__*/ React.createElement("button", { className: "px-2 py-1 bg-[#7E57C2] text-white rounded text-xs", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "Share"))), /*#__PURE__*/ React.createElement("section", { className: "mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg text-[#7E57C2] font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Communities & Discussions"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-2", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-2 py-1 bg-[#7E57C2] text-white rounded text-xs", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Create Community"), /*#__PURE__*/ React.createElement("button", { className: "px-2 py-1 bg-[#7E57C2] text-white rounded text-xs", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Join Community")), /*#__PURE__*/ React.createElement("div", { className: "mt-2 p-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#7E57C2]", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Discussion Forum"), /*#__PURE__*/ React.createElement("p", { className: "mt-1", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Start a new topic or join an existing discussion in your community!"))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg text-[#7E57C2] font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Trivia Game"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex justify-center items-center", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] border-8 rounded-full relative", style: { background: 'conic-gradient(green 0% 16.6%, red 16.6% 33.2%, #7E57C2 33.2% 49.8%, yellow 49.8% 66.4%, orange 66.4% 83%, blue 83% 100%)', animation: 'spin-slow 10s linear infinite' }, __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute text-xs font-roboto rounded-full px-4 py-2", style: { top: "50%", left: "50%", transform: "translate(-50%, -50%)", backgroundColor: "#7E57C2", color: "white", width: "50px", height: "50px", borderRadius: "50%" }, __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "🎲"), /*#__PURE__*/ React.createElement("span", { className: "absolute", style: { width: "100%", height: "100%", display: "flex", justifyContent: "space-around", alignItems: "center", padding: "10px", boxSizing: "border-box", transform: "rotate(15deg)" }, __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "rotate-[60deg]", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "Matemática"), /*#__PURE__*/ React.createElement("span", { className: "rotate-[60deg]", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "Português"), /*#__PURE__*/ React.createElement("span", { className: "rotate-[60deg]", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "Ciências"), /*#__PURE__*/ React.createElement("span", { className: "rotate-[60deg]", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, "Geral"), /*#__PURE__*/ React.createElement("span", { className: "rotate-[60deg]", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "História"), /*#__PURE__*/ React.createElement("span", { className: "rotate-[60deg]", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, "Química")))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, ` @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } `)); }