function MainComponent() { const [startAnimation, setStartAnimation] = React.useState(false); const toggleAnimation = ()=>{ setStartAnimation(false); setTimeout(()=>{ setStartAnimation(true); }, 10); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center justify-center bg-[#010101]", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#FFFFFF] font-roboto text-4xl mb-8", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, "Universe Size Comparison"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center gap-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[100px] h-[100px] bg-[#555] rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#FFFFFF] font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Earth")), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] bg-[#777] rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#FFFFFF] font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Jupiter")), /*#__PURE__*/ React.createElement("div", { className: "w-[600px] h-[600px] bg-[#999] rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#FFFFFF] font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Sun")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-[900px] h-[900px] relative", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bg-[#BBB] rounded-full w-full h-full flex items-center justify-center", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#FFFFFF] font-roboto text-2xl", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Milky Way"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, ` @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } `), /*#__PURE__*/ React.createElement("div", { className: `${startAnimation ? "rotate360" : ""} w-[1200px] h-[1200px] bg-[#DDD] rounded-full flex items-center justify-center mt-8`, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#FFFFFF] font-roboto text-3xl", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "And Beyond")), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-[#444] text-[#FFF] font-roboto py-2 px-4 rounded", onClick: toggleAnimation, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "Replay")); }