function ClickableElementDesign({ onClick, label, value, name }) { return /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>onClick(value), name: name, value: value, className: "w-full py-2 px-4 border border-[#ddd] bg-[#f9f9f9] rounded-lg hover:bg-[#eaeaea] text-left font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function ClickableElementDesignStory() { const handleOptionClick = (value)=>{ console.log(value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ClickableElementDesign, { onClick: handleOptionClick, label: "A) エベレスト", value: "A", name: "option", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [result, setResult] = React.useState(''); const handleOptionClick = (option)=>{ setResult(option === 'A' ? '合格' : '不合格'); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f0f0] min-h-screen flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg max-w-md w-full", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#333] mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "クイズ: 世界で最も高い山はどれですか？"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>handleOptionClick('A'), name: "option", value: "A", className: "w-full py-2 px-4 border border-[#ddd] bg-[#f9f9f9] rounded-lg hover:bg-[#eaeaea] text-left", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, "A) エベレスト"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>handleOptionClick('B'), name: "option", value: "B", className: "w-full py-2 px-4 border border-[#ddd] bg-[#f9f9f9] rounded-lg hover:bg-[#eaeaea] text-left", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, "B) キリマンジャロ"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>handleOptionClick('C'), name: "option", value: "C", className: "w-full py-2 px-4 border border-[#ddd] bg-[#f9f9f9] rounded-lg hover:bg-[#eaeaea] text-left", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "C) マッキンリー"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>handleOptionClick('D'), name: "option", value: "D", className: "w-full py-2 px-4 border border-[#ddd] bg-[#f9f9f9] rounded-lg hover:bg-[#eaeaea] text-left", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "D) アコンカグア")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-xl font-roboto text-[#333]", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, result)))); }