function StylishButton({ text, icon, color, onClick }) { const bgColor = { yellow: "bg-[#F8E44F]", purple: "bg-[#C1BFF9]", teal: "bg-[#7EE7D6]" }[color] || "bg-[#F8E44F]"; const roundedClass = icon ? "rounded-full" : "rounded-[6px]"; return /*#__PURE__*/ React.createElement("button", { className: `font-poppins text-black border-2 border-black ${bgColor} ${roundedClass} px-4 py-2`, onClick: onClick, __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, icon && /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} mr-2 text-black`, __source: { fileName: "", lineNumber: 17, columnNumber: 18 }, __self: this }), text)); } function StylishButtonStory() { const handleClick = ()=>{ alert("Button clicked!"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StylishButton, { text: "Click me", icon: "fa-star", color: "yellow", onClick: handleClick, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Purple Button", icon: "fa-heart", color: "purple", onClick: handleClick, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Teal No Icon", color: "teal", onClick: handleClick, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MainComponent() { const [clickCount, setClickCount] = React.useState(0); const [isGameStarted, setIsGameStarted] = React.useState(false); const [timer, setTimer] = React.useState(30); React.useEffect(()=>{ let interval; if (isGameStarted && timer > 0) { interval = setInterval(()=>{ setTimer((prevTimer)=>prevTimer - 1); }, 1000); } else if (timer === 0) { clearInterval(interval); } return ()=>clearInterval(interval); }, [ isGameStarted, timer ]); const handleStartGame = ()=>{ setIsGameStarted(true); setClickCount(0); setTimer(30); }; const handleClick = ()=>{ if (isGameStarted && timer > 0) { setClickCount((prevCount)=>prevCount + 1); } }; return /*#__PURE__*/ React.createElement("div", { className: "relative min-h-screen", style: { backgroundImage: 'url(https://ucarecdn.com/bbdeb3e0-0540-4313-a02c-3d01f4ce1e9a/-/format/auto/)', backgroundSize: 'cover', backgroundPosition: 'center' }, __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center pt-6 space-y-6", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-poppins text-4xl font-bold bg-white bg-opacity-70 rounded px-6 py-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "レンダレンダ"), /*#__PURE__*/ React.createElement(StylishButton, { text: "ゲームスタート", color: "teal", onClick: handleStartGame, icon: "", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "font-poppins text-2xl font-bold bg-white bg-opacity-70 rounded px-4 py-2 mt-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "タイマー: ", timer, " 秒"), timer === 0 && /*#__PURE__*/ React.createElement("div", { className: "font-poppins text-2xl font-bold bg-white bg-opacity-70 rounded px-4 py-2 mt-4", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "終了! 合計クリック数: ", clickCount), /*#__PURE__*/ React.createElement("button", { onClick: handleClick, className: "flex items-center justify-center w-[200px] h-[200px] bg-[#C1BFF9] text-black font-poppins font-bold text-2xl rounded-full border-4 border-black mt-8", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "押せ！"), /*#__PURE__*/ React.createElement("div", { className: "font-poppins text-2xl font-bold bg-white bg-opacity-70 rounded px-4 py-2 mt-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "クリック数: ", clickCount))); }