function MainComponent() { const [password, setPassword] = React.useState(''); const [length, setLength] = React.useState(12); const [includeLower, setIncludeLower] = React.useState(true); const [includeUpper, setIncludeUpper] = React.useState(true); const [includeNumbers, setIncludeNumbers] = React.useState(true); const [includeSymbols, setIncludeSymbols] = React.useState(true); const generatePassword = ()=>{ let chars = ''; if (includeLower) chars += 'abcdefghijklmnopqrstuvwxyz'; if (includeUpper) chars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; if (includeNumbers) chars += '0123456789'; if (includeSymbols) chars += '!@#$%^&*()_+[]{}|;:,.<>?'; if (chars === '') return; let newPassword = ''; for(let i = 0; i < length; i++){ newPassword += chars.charAt(Math.floor(Math.random() * chars.length)); } setPassword(newPassword); }; const copyPassword = ()=>{ navigator.clipboard.writeText(password); }; React.useEffect(()=>{ generatePassword(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-crimson-text mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "パスワード自動生成"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", name: "password", className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "生成されたパスワード:"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", id: "password", name: "password", value: password, readOnly: true, className: "flex-grow bg-gray-100 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: copyPassword, className: "ml-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "コピー")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "length", className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "桁数:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "length", name: "length", value: length, onChange: (e)=>setLength(Number(e.target.value)), className: "w-full bg-gray-100 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "使用する文字:"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "includeLower", name: "includeLower", checked: includeLower, onChange: (e)=>setIncludeLower(e.target.checked), className: "mr-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "includeLower", className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "英字小文字")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "includeUpper", name: "includeUpper", checked: includeUpper, onChange: (e)=>setIncludeUpper(e.target.checked), className: "mr-2", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "includeUpper", className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "英字大文字")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "includeNumbers", name: "includeNumbers", checked: includeNumbers, onChange: (e)=>setIncludeNumbers(e.target.checked), className: "mr-2", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "includeNumbers", className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "数字")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "includeSymbols", name: "includeSymbols", checked: includeSymbols, onChange: (e)=>setIncludeSymbols(e.target.checked), className: "mr-2", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "includeSymbols", className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "記号"))), /*#__PURE__*/ React.createElement("button", { onClick: generatePassword, className: "w-full px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "新しいパスワードを生成"))); }