function MainComponent() { const [modalOpen, setModalOpen] = React.useState(false); const [selectedFeatures, setSelectedFeatures] = React.useState([]); const [apiKeys, setApiKeys] = React.useState([]); const toggleModal = ()=>setModalOpen(!modalOpen); const handleFeatureChange = (event)=>{ const { value, checked } = event.target; setSelectedFeatures((prev)=>checked ? [ ...prev, value ] : prev.filter((item)=>item !== value)); }; const handleGenerateApiKey = ()=>{ const newApiKey = { name: "新しいAPIキー", lastDigits: Math.floor(Math.random() * 9000 + 1000).toString(), features: selectedFeatures, createdAt: new Date().toLocaleString(), expiresAt: new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toLocaleString() }; setApiKeys((prev)=>[ ...prev, newApiKey ]); setModalOpen(false); }; const handleDeleteApiKey = (index)=>{ setApiKeys((prev)=>prev.filter((_, i)=>i !== index)); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col items-center bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-5xl p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleModal, className: "bg-blue-500 text-white px-4 py-2 rounded mt-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "発行"), /*#__PURE__*/ React.createElement("table", { className: "mt-6 w-full bg-white shadow-lg", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "名称"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "下4桁"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "利用可能機能"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "作成日時"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "有効期限"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "削除"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, apiKeys.map((apiKey, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, apiKey.name), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, apiKey.lastDigits), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, apiKey.features.join(", ")), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, apiKey.createdAt), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, apiKey.expiresAt), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteApiKey(index), className: "bg-red-500 text-white px-2 py-1 rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, "削除"))))))), modalOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "APIキー作成"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "feature1", value: "feature1", onChange: handleFeatureChange, className: "mr-2", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }), "機能 1"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "feature2", value: "feature2", onChange: handleFeatureChange, className: "mr-2", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }), "機能 2"), /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "feature3", value: "feature3", onChange: handleFeatureChange, className: "mr-2", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }), "機能 3")), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateApiKey, className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "作成"), /*#__PURE__*/ React.createElement("button", { onClick: toggleModal, className: "bg-gray-500 text-white px-4 py-2 rounded ml-2", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "キャンセル")))); }