function FortunePredictionButton({ onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#4CAF50] text-white rounded-lg", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "占う"); } function FortunePredictionButtonStory() { const calculateFortune = ()=>alert("Your fortune is being predicted!"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FortunePredictionButton, { onClick: calculateFortune, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [fortune, setFortune] = React.useState({ luckyNumber: '', goodTime: '', badTime: '', compatibleSign: '', compatibleBloodType: '', goodDirection: '', badDirection: '' }); const calculateFortune = ()=>{ setFortune({ luckyNumber: Math.floor(Math.random() * 10000).toString(), goodTime: '午前中', badTime: '午後3時から5時', compatibleSign: '天秤座', compatibleBloodType: 'AB型', goodDirection: '北東', badDirection: '南西' }); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4 bg-[#F0F0F0] w-full min-h-screen flex flex-col items-center justify-center space-y-4", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl text-[#121212] mb-6", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, "運勢占い"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "名前を入力", className: "p-2 border-2 border-[#D9D9D9] rounded-lg", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(FortunePredictionButton, { onClick: calculateFortune, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] p-4 bg-white rounded-lg shadow-lg space-y-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#343434]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "ラッキーナンバー: ", fortune.luckyNumber), /*#__PURE__*/ React.createElement("div", { className: "text-[#343434]", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "運いい時間帯: ", fortune.goodTime), /*#__PURE__*/ React.createElement("div", { className: "text-[#343434]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "運の良くない時間帯: ", fortune.badTime), /*#__PURE__*/ React.createElement("div", { className: "text-[#343434]", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "相性の良い星座: ", fortune.compatibleSign), /*#__PURE__*/ React.createElement("div", { className: "text-[#343434]", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "相性の良い血液型: ", fortune.compatibleBloodType), /*#__PURE__*/ React.createElement("div", { className: "text-[#343434]", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "運良い方角: ", fortune.goodDirection), /*#__PURE__*/ React.createElement("div", { className: "text-[#343434]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "運の悪い方角: ", fortune.badDirection))); }