function MainComponent() { const [activeTab, setActiveTab] = React.useState('timeline'); const articles = [ { id: 1, title: "Reactフックの基本", author: "山田太郎", likes: 42, tags: [ "React", "JavaScript" ] }, { id: 2, title: "Pythonで機械学習入門", author: "佐藤花子", likes: 38, tags: [ "Python", "機械学習" ] }, { id: 3, title: "DockerでのCI/CD構築", author: "鈴木一郎", likes: 56, tags: [ "Docker", "CI/CD" ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "font-sans bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-green-600 text-white p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Qiita風サイト"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-200", __source: { fileName: "", lineNumber: 17, columnNumber: 19 }, __self: this }, "ホーム")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-200", __source: { fileName: "", lineNumber: 18, columnNumber: 19 }, __self: this }, "タグ")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-200", __source: { fileName: "", lineNumber: 19, columnNumber: 19 }, __self: this }, "ユーザー")))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto mt-8 px-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "記事一覧"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "新規投稿")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-4 mb-8", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded ${activeTab === 'timeline' ? 'bg-gray-200' : 'hover:bg-gray-100'}`, onClick: ()=>setActiveTab('timeline'), __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "タイムライン"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded ${activeTab === 'trend' ? 'bg-gray-200' : 'hover:bg-gray-100'}`, onClick: ()=>setActiveTab('trend'), __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "トレンド")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, articles.map((article)=>/*#__PURE__*/ React.createElement("div", { key: article.id, className: "border-b pb-4 last:border-b-0", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-blue-600 hover:underline", __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this }, article.title)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-sm text-gray-600", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-4", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, article.author), /*#__PURE__*/ React.createElement("span", { className: "mr-4", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-red-500", __source: { fileName: "", lineNumber: 57, columnNumber: 42 }, __self: this }), " ", article.likes), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, article.tags.map((tag)=>/*#__PURE__*/ React.createElement("span", { key: tag, className: "bg-gray-200 px-2 py-1 rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 23 }, __self: this }, tag))))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-white py-8 mt-8", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 md:mb-0", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, "Qiita風サイト"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "プログラマーのための技術情報共有プラットフォーム")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "リンク"), /*#__PURE__*/ React.createElement("ul", { className: "text-sm", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-300", __source: { fileName: "", lineNumber: 80, columnNumber: 21 }, __self: this }, "ヘルプ")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-300", __source: { fileName: "", lineNumber: 81, columnNumber: 21 }, __self: this }, "利用規約")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-300", __source: { fileName: "", lineNumber: 82, columnNumber: 21 }, __self: this }, "プライバシーポリシー"))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center text-sm", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "© 2024 Qiita風サイト. All rights reserved.")))); }