function KnowledgeCard({ title, summary, category, date }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block px-3 py-1 text-sm font-semibold text-[#4A5568] bg-[#EDF2F7] rounded-full", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, category)), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2 text-[#2D3748] font-roboto line-clamp-2", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-[#718096] mb-4 line-clamp-3 font-sans", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, summary), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#A0AEC0] font-sans", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, date)); } function KnowledgeCardStory() { const sampleArticles = [ { title: "人工知能の基礎知識：初心者向けガイド", summary: "AIの基本概念から実際の応用例まで、わかりやすく解説します。機械学習、ディープラーニング、自然言語処理など、主要な技術についても触れています。", category: "テクノロジー", date: "2024年1月15日" }, { title: "持続可能な開発のためのベストプラクティス", summary: "環境に配慮したソフトウェア開発の方法論について詳しく解説。エネルギー効率の良いコーディングから、環境負荷の少ないインフラ選択まで。", category: "開発手法", date: "2024年1月20日" } ]; return /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 p-6 md:grid-cols-2 lg:grid-cols-3", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, sampleArticles.map((article, index)=>/*#__PURE__*/ React.createElement(KnowledgeCard, { key: index, ...article, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }))); } function CategorySidebar() { const [selectedCategory, setSelectedCategory] = useState(null); const categories = [ { id: 1, name: "ビジネス" }, { id: 2, name: "技術" }, { id: 3, name: "芸術" }, { id: 4, name: "料理" }, { id: 5, name: "スポーツ" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-64 bg-gray-100 p-6 border-r border-gray-200", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "カテゴリー"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: `cursor-pointer p-2 mb-2 rounded hover:bg-gray-200 ${!selectedCategory ? "bg-blue-100" : ""}`, onClick: ()=>setSelectedCategory(null), __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "すべて"), categories.map((category)=>/*#__PURE__*/ React.createElement("li", { key: category.id, className: `cursor-pointer p-2 mb-2 rounded hover:bg-gray-200 ${selectedCategory === category.id ? "bg-blue-100" : ""}`, onClick: ()=>setSelectedCategory(category.id), __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, category.name)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-6", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, selectedCategory ? `選択されたカテゴリー: ${categories.find((c)=>c.id === selectedCategory)?.name}` : "すべてのカテゴリーを表示中"))); } function CategorySidebarStory() { return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CategorySidebar, { __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this })); } function NavigationBar({ onSearch, onLogin, onSignup, isLoggedIn, logoSrc = "/logo.png" }) { const [searchQuery, setSearchQuery] = useState(""); const handleSearch = (e)=>{ e.preventDefault(); onSearch?.(searchQuery); }; return /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow px-4 py-2", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-8", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: "サイトロゴ", className: "h-8 w-auto", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex space-x-4", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "font-roboto text-gray-700 hover:text-gray-900", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "ホーム"), /*#__PURE__*/ React.createElement("a", { href: "/knowledge", className: "font-roboto text-gray-700 hover:text-gray-900", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "ナレッジリスト"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "hidden md:block", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", name: "search", placeholder: "検索...", className: "w-[300px] px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "absolute right-3 top-2.5 text-gray-400", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, !isLoggedIn ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: onLogin, className: "font-roboto px-4 py-2 text-blue-600 hover:text-blue-700", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("button", { onClick: onSignup, className: "font-roboto px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, "新規登録")) : /*#__PURE__*/ React.createElement("button", { className: "p-2 text-gray-600 hover:text-gray-800", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-xl", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this })))))); } function NavigationBarStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, "ログインしていない状態:"), /*#__PURE__*/ React.createElement(NavigationBar, { onSearch: (q)=>console.log("Search:", q), onLogin: ()=>console.log("Login clicked"), onSignup: ()=>console.log("Signup clicked"), isLoggedIn: false, __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "ログインしている状態:"), /*#__PURE__*/ React.createElement(NavigationBar, { onSearch: (q)=>console.log("Search:", q), onLogin: ()=>console.log("Login clicked"), onSignup: ()=>console.log("Signup clicked"), isLoggedIn: true, __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }))); } function ArticleEditor({ initialText = "", onSave }) { const [markdown, setMarkdown] = useState(initialText); const [preview, setPreview] = useState(false); const togglePreview = ()=>setPreview(!preview); const handleSave = ()=>{ if (onSave) { onSave(markdown); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mx-auto p-4 font-inter", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: togglePreview, className: "px-4 py-2 bg-[#2563eb] text-white rounded hover:bg-[#1d4ed8] transition-colors", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, preview ? "編集モード" : "プレビューモード"), /*#__PURE__*/ React.createElement("button", { onClick: handleSave, className: "px-4 py-2 bg-[#059669] text-white rounded hover:bg-[#047857] transition-colors", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "保存")), /*#__PURE__*/ React.createElement("div", { className: "border rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, preview ? /*#__PURE__*/ React.createElement("div", { className: "prose max-w-none p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, markdown.split("\n").map((line, i)=>/*#__PURE__*/ React.createElement("p", { key: i, __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, line))) : /*#__PURE__*/ React.createElement("textarea", { value: markdown, onChange: (e)=>setMarkdown(e.target.value), className: "w-full h-[400px] p-4 rounded-lg focus:outline-none resize-none", placeholder: "マークダウンを入力してください...", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }))); } function ArticleEditorStory() { const handleSave = (content)=>{ console.log("保存されたコンテンツ:", content); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ArticleEditor, { initialText: "# こんにちは\\n\\nここにマークダウンを入力してください。", onSave: handleSave, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); } function MainComponent() { const [featuredArticles] = useState([ { title: "データ分析入門ガイド", description: "ビジネスデータの効果的な分析方法を学ぶ", author: "山田太郎", date: "2024-02-15", imageUrl: "/images/data-analytics.jpg" }, { title: "プロジェクト管理の基礎", description: "成功するプロジェクトマネジメントの秘訣", author: "佐藤花子", date: "2024-02-14", imageUrl: "/images/project-management.jpg" }, { title: "効果的なチーム構築", description: "高パフォーマンスチームを作る方法", author: "鈴木一郎", date: "2024-02-13", imageUrl: "/images/team-building.jpg" } ]); const [popularArticles] = useState([ { title: "リモートワーク成功のヒント", description: "在宅勤務を効率的に行うためのガイド", author: "田中美咲", date: "2024-02-12", imageUrl: "/images/remote-work.jpg" }, { title: "デジタルマーケティング戦略", description: "オンラインビジネスの成長を加速する", author: "中村健一", date: "2024-02-11", imageUrl: "/images/digital-marketing.jpg" } ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-12", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-roboto font-bold text-gray-900 mb-6", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "注目の記事"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, featuredArticles.map((article, index)=>/*#__PURE__*/ React.createElement(React.Fragment, null)))), /*#__PURE__*/ React.createElement("section", { className: "mb-12", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-roboto font-bold text-gray-900 mb-6", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "人気の記事"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, popularArticles.map((article, index)=>/*#__PURE__*/ React.createElement(React.Fragment, null)))), /*#__PURE__*/ React.createElement("section", { className: "mb-12", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-roboto font-bold text-gray-900 mb-6", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "カテゴリー"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-200", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-2xl text-blue-600 mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-medium", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "ビジネス戦略")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-200", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-2xl text-green-600 mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-medium", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "チーム管理")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-200", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-laptop-code text-2xl text-purple-600 mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-medium", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "テクノロジー")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-200", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bullhorn text-2xl text-red-600 mb-2", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-medium", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "マーケティング")))))); }