function GenerateButton({ label, onClick }) { return /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function GenerateButtonStory() { const handleGenerate = ()=>{ console.log("Button clicked!"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GenerateButton, { label: "順番を決定", onClick: handleGenerate, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const [listItems, setListItems] = React.useState(''); const [randomizedList, setRandomizedList] = React.useState([]); const [copied, setCopied] = React.useState(false); const handleGenerate = ()=>{ const items = listItems.split('\n').filter((item)=>item.trim() !== ''); const shuffledItems = items.sort(()=>Math.random() - 0.5); setRandomizedList(shuffledItems); }; const handleCopy = ()=>{ const textToCopy = randomizedList.join('\n'); navigator.clipboard.writeText(textToCopy).then(()=>{ setCopied(true); setTimeout(()=>setCopied(false), 2000); }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "ランダムに順番を決定"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "listItems", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "１行ごとに改行して入力"), /*#__PURE__*/ React.createElement("textarea", { name: "listItems", id: "listItems", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline h-[150px]", value: listItems, onChange: (e)=>setListItems(e.target.value), __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(GenerateButton, { label: "Generate Random Order", onClick: handleGenerate, __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "結果を表示"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, randomizedList.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "py-1", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, item)))), randomizedList.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(GenerateButton, { label: "Copy To Clipboard", onClick: handleCopy, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), copied && /*#__PURE__*/ React.createElement("span", { className: "text-green-500 text-sm font-semibold", __source: { fileName: "", lineNumber: 50, columnNumber: 24 }, __self: this }, "Copied!")))); }