function MainComponent() { const text = 'The quick brown fox jumps over the lazy dog. The spaceship soared through the galaxy, past stars and planets. Typing these words is a fun challenge!'; const randomText = ()=>{ const texts = [ 'The quick brown fox jumps over the lazy dog.', 'The spaceship soared through the galaxy, past stars and planets.', 'Typing these words is a fun challenge!', 'Retro games bring nostalgic memories to life.', 'In space, no one can hear you scream.' ]; return texts[Math.floor(Math.random() * texts.length)]; }; return /*#__PURE__*/ React.createElement("div", { className: "font-press-start bg-[#000] text-[#fff] min-h-screen flex flex-col items-center", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#282828] text-center p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "レトロゲームタイピング")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center w-full mt-10", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[500px] h-[300px] p-4 bg-[#1a1a1a] border-4 border-[#fff] relative flex items-center justify-center", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, randomText())), /*#__PURE__*/ React.createElement("input", { type: "text", name: "typing", className: "mt-10 w-[500px] p-4 text-lg bg-[#121212] border-4 border-[#fff] text-[#00ff00]", placeholder: "ここに入力してください", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#282828] text-center p-4 mt-auto", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "© 2023 Retro Game Typing Challenge")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, ` @font-face { font-family: 'Press Start 2P'; src: url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); } .font-press-start { font-family: 'Press Start 2P', cursive; } `)); }