function ButtonClickCounter({ leftCount, rightCount, onLeftClick, onRightClick }) { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-end h-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2 font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, leftCount), /*#__PURE__*/ React.createElement("button", { className: "bg-[#0000FF] text-white font-roboto w-[100px] h-[50px]", onClick: onLeftClick, __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "Left")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2 font-roboto", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, rightCount), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF0000] text-white font-roboto w-[100px] h-[50px]", onClick: onRightClick, __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "Right"))); } function ButtonClickCounterStory() { return /*#__PURE__*/ React.createElement("div", { style: { height: '100vh' }, __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ButtonClickCounter, { leftCount: 0, rightCount: 0, onLeftClick: ()=>{}, onRightClick: ()=>{}, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent({ leftCount, rightCount, onLeftClick, onRightClick, onStartClick, countdown }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#FFA500] text-white font-roboto w-[100px] h-[50px]", onClick: onStartClick, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "START")), /*#__PURE__*/ React.createElement("div", { className: "flex w-full justify-center items-center h-[400px]", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ButtonClickCounter, { leftCount: leftCount, rightCount: rightCount, onLeftClick: onLeftClick, onRightClick: onRightClick, __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }), countdown !== null && /*#__PURE__*/ React.createElement("div", { className: "absolute text-[#000000] text-6xl font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, countdown))); } function StoryComponent() { const [leftClicks, setLeftClicks] = React.useState(0); const [rightClicks, setRightClicks] = React.useState(0); const [countdown, setCountdown] = React.useState(null); const handleLeftClick = ()=>setLeftClicks((prev)=>prev + 1); const handleRightClick = ()=>setRightClicks((prev)=>prev + 1); const handleStartClick = ()=>{ setCountdown("１"); }; return /*#__PURE__*/ React.createElement(MainComponent, { leftCount: leftClicks, rightCount: rightClicks, onLeftClick: handleLeftClick, onRightClick: handleRightClick, onStartClick: handleStartClick, countdown: countdown, __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }); }