function MainComponent() { const [activeTab, setActiveTab] = React.useState('dashboard'); const [salesAmount, setSalesAmount] = React.useState(''); const [salesQuantity, setSalesQuantity] = React.useState(''); const header = /*#__PURE__*/ React.createElement("div", { className: "bg-[#1F2937] text-white py-4 px-8 flex justify-between items-center", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, "売り上げ管理"), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell cursor-pointer", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle cursor-pointer", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }))); const sidebar = /*#__PURE__*/ React.createElement("div", { className: "bg-[#374151] text-white w-[250px] p-6", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: `hover:bg-[#4B5563] p-2 rounded cursor-pointer ${activeTab === 'dashboard' && 'bg-[#4B5563]'}`, onClick: ()=>setActiveTab('dashboard'), __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "ダッシュボード"), /*#__PURE__*/ React.createElement("li", { className: `hover:bg-[#4B5563] p-2 rounded cursor-pointer ${activeTab === 'sales' && 'bg-[#4B5563]'}`, onClick: ()=>setActiveTab('sales'), __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "売り上げ"), /*#__PURE__*/ React.createElement("li", { className: `hover:bg-[#4B5563] p-2 rounded cursor-pointer ${activeTab === 'productManagement' && 'bg-[#4B5563]'}`, onClick: ()=>setActiveTab('productManagement'), __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "商品管理"), /*#__PURE__*/ React.createElement("li", { className: "hover:bg-[#4B5563] p-2 rounded cursor-pointer", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "レポート"), /*#__PURE__*/ React.createElement("li", { className: "hover:bg-[#4B5563] p-2 rounded cursor-pointer", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "設定"))); const dashboard = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full p-8 space-y-6", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "売り上げダッシュボード"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md flex flex-col items-center", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "総売り上げ"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold mt-2", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "¥1,200,000")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md flex flex-col items-center", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "新規顧客"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold mt-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "150")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md flex flex-col items-center", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "返品率"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold mt-2", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "2%")))); const salesForm = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col p-8 space-y-6", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, "売り上げ入力フォーム"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold", htmlFor: "salesAmount", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "売り上げ金額: "), /*#__PURE__*/ React.createElement("input", { className: "mt-1 p-2 border rounded w-full", type: "number", name: "salesAmount", id: "salesAmount", value: salesAmount, onChange: (e)=>setSalesAmount(e.target.value), __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold", htmlFor: "salesQuantity", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "売り上げ個数: "), /*#__PURE__*/ React.createElement("input", { className: "mt-1 p-2 border rounded w-full", type: "number", name: "salesQuantity", id: "salesQuantity", value: salesQuantity, onChange: (e)=>setSalesQuantity(e.target.value), __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", className: "mt-4 p-2 bg-blue-500 text-white rounded", onClick: ()=>alert(`売り上げ金額: ${salesAmount}, 売り上げ個数: ${salesQuantity}`), __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "確認"))); const productManagement = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col p-8 space-y-6", __source: { fileName: "", lineNumber: 95, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, "商品マスタ管理")); let activeContent; if (activeTab === 'dashboard') { activeContent = dashboard; } else if (activeTab === 'sales') { activeContent = salesForm; } else if (activeTab === 'productManagement') { activeContent = productManagement; } return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 111, columnNumber: 5 }, __self: this }, sidebar, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, header, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full p-2 space-y-6", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, activeContent))); }