function VideoEditingLandingPage({ placeholder, name, value, onChange }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "border border-[#EAE7DC] p-2 rounded resize-none h-32 w-full", placeholder: placeholder, name: name, value: value, onChange: onChange, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function VideoEditingLandingPageStory() { const [inputMessage, setInputMessage] = React.useState(""); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoEditingLandingPage, { placeholder: "Type your message here...", name: "user_message", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const [activeTab, setActiveTab] = React.useState("overview"); const renderTabContent = ()=>{ switch(activeTab){ case "overview": return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, "総視聴回数"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, "10,234")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, "総収益"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, "¥52,000")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, "フォロワー数"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, "1,500")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, "平均視聴時間"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, "5:30"))); case "videos": return /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "最新の動画"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, "夏の料理レシピ"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, "視聴回数: 1,200")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, "DIYインテリア"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, "視聴回数: 980")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "朝のヨガルーティン"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "視聴回数: 750")))); case "analytics": return /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "分析"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "ここに詳細な分析情報が表示されます。")); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#FAF9F6] min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#EAE7DC] p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#E85A4F] font-roboto text-2xl", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "クリエイターダッシュボード")), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("overview"), className: `px-4 py-2 rounded ${activeTab === "overview" ? "bg-[#E98074] text-white" : "bg-[#D8C3A5] text-[#8E8D8A]"}`, __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "概要"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("videos"), className: `px-4 py-2 rounded ${activeTab === "videos" ? "bg-[#E98074] text-white" : "bg-[#D8C3A5] text-[#8E8D8A]"}`, __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "動画"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("analytics"), className: `px-4 py-2 rounded ${activeTab === "analytics" ? "bg-[#E98074] text-white" : "bg-[#D8C3A5] text-[#8E8D8A]"}`, __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "分析"))), renderTabContent()), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#EAE7DC] p-4 text-center", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#8E8D8A] font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "© 2024 All Rights Reserved."))); }