function MainComponent({ names, onDraw }) { const [selectedName, setSelectedName] = React.useState(names[0]); const handleSelectChange = (e)=>setSelectedName(e.target.value); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, "抽選サイト"), /*#__PURE__*/ React.createElement("select", { name: "name", className: "mb-4 p-2 border border-gray-300", value: selectedName, onChange: handleSelectChange, __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, names.map((name, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: name, __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, name))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onDraw(selectedName), className: "px-4 py-2 bg-blue-500 text-white font-roboto rounded", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "抽選！")); } function StoryComponent() { const names = [ "Alice", "Bob", "Charlie" ]; const [numbers, setNumbers] = React.useState([]); const [usedNames, setUsedNames] = React.useState([]); const handleDraw = (selectedName)=>{ if (usedNames.includes(selectedName)) return; const newNumber = Math.floor(Math.random() * 40) + 1; if (numbers.includes(newNumber)) return; const newNumbers = [ ...numbers, newNumber ]; setNumbers(newNumbers); setUsedNames([ ...usedNames, selectedName ]); // Here should go the logic to save to the database }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { names: names, onDraw: handleDraw, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "抽選された数字:"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, numbers.map((number, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, number))))); }