#7 ぼちぼち

frontend/src/components/TagSidebar.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react'
+import axios from 'axios'
+import { Link } from 'react-router-dom'
+import { API_BASE_URL } from '../config'
+
+
+const TagSidebar: React.FC = () => {
+  const [tags, setTags] = useState<Array<{ id: number, name: string }>>([])
+
+  useEffect(() => {
+    const fetchTags = async () => {
+      try {
+        const response = await axios.get (`${API_BASE_URL}/tags`)
+        setTags(response.data)
+      } catch (error) {
+        console.error('Failed to fetch tags:', error)
+      }
+    }
+
+    fetchTags()
+  }, [])
+
+  return (
+    <div className="w-64 bg-gray-100 p-4 border-r border-gray-200 h-full">
+      <h2 className="text-xl font-bold mb-4">タグ一覧</h2>
+      <ul>
+        {tags.map (tag => (
+          <li key={tag.id} className="mb-2">
+            <Link to={`/tags/${tag.id}`} className="text-blue-600 hover:underline">
+              {tag.name}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default TagSidebar

frontend/src/components/TopNav.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+
+const TopNav: React.FC = () => {
+  return (
+    <nav className="bg-gray-800 text-white p-3 flex justify-between items-center w-full">
+      <div className="flex items-center gap-4">
+        <a href="/" className="text-xl font-bold text-orange-500">ぼざクリ タグ広場</a>
+        <a href="/" className="hover:text-orange-500">広場</a>
+        <a href="/deerjikists" className="hover:text-orange-500">ニジラー</a>
+        <a href="/tags" className="hover:text-orange-500">タグ</a>
+        <a href="/wiki" className="hover:text-orange-500">Wiki</a>
+      </div>
+      <div className="ml-auto pr-4">
+        <a href="/login" className="hover:text-orange-500">ログイン</a>
+      </div>
+    </nav>
+  )
+}
+
+export default TopNav