#7 ぼちぼち

frontend/src/components/TagSearch.tsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from 'react'
+import axios from 'axios'
+import { Link, useNavigate } from 'react-router-dom'
+import { API_BASE_URL } from '../config'
+
+
+const TagSearch: React.FC = () => {
+  const navigate = useNavigate ()
+
+  const [search, setSearch] = useState ('')
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && search.length > 0)
+      navigate (`/posts?${ (new URLSearchParams ({ tags: search })).toString () }`,
+                { replace: true })
+  }
+
+  return (
+    <input
+      type="text"
+      placeholder="タグ検索..."
+      value={search}
+      onChange={e => setSearch (e.target.value)}
+      onKeyDown={handleKeyDown}
+      className="w-full px-3 py-2 mb-4 border rounded"
+    />
+  )
+}
+
+export default TagSearch

frontend/src/components/TagSidebar.tsx

@@ -2,10 +2,11 @@ import React, { useEffect, useState } from 'react'
 import axios from 'axios'
 import { Link } from 'react-router-dom'
 import { API_BASE_URL } from '../config'
+import TagSearch from './TagSearch'
 
 
 const TagSidebar: React.FC = () => {
-  const [tags, setTags] = useState<Array<{ id: number, name: string }>>([])
+  const [tags, setTags] = useState<Array<{ id: number, name: string, category: string }>>([])
 
   useEffect(() => {
     const fetchTags = async () => {
@@ -22,11 +23,14 @@ const TagSidebar: React.FC = () => {
 
   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>
+      <TagSearch />
       <ul>
         {tags.map (tag => (
           <li key={tag.id} className="mb-2">
-            <Link to={`/tags/${tag.id}`} className="text-blue-600 hover:underline">
+            <Link
+              to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
+              className="text-blue-600 hover:underline"
+            >
               {tag.name}
             </Link>
           </li>