#11 完了

frontend/src/components/TopNav.tsx

@@ -1,27 +1,38 @@
-import React from "react"
+import React, { useState } from "react"
 import { Link } from 'react-router-dom'
+import SettingsDialogue from './SettingsDialogue'
+import { Button } from './ui/button'
 
 type User = { id:               number
               name:             string | null
               inheritanceCode:  string
               role:             string }
 
-type Props = { user: User }
+type Props = { user:    User
+               setUser: (user: User) => void }
 
 
-const TopNav: React.FC = ({ user }: Props) => (
-    <nav className="bg-gray-800 text-white p-3 flex justify-between items-center w-full">
-      <div className="flex items-center gap-4">
-        <Link to="/" className="text-xl font-bold text-orange-500">ぼざクリ タグ広場</Link>
-        <Link to="/posts" className="hover:text-orange-500">広場</Link>
-        <Link to="/deerjikists" className="hover:text-orange-500">ニジラー</Link>
-        <Link to="/tags" className="hover:text-orange-500">タグ</Link>
-        <Link to="/wiki" className="hover:text-orange-500">Wiki</Link>
-      </div>
-      <div className="ml-auto pr-4">
-        <Link to="/setting" className="hover:text-orange-500">{user?.name || '名もなきニジラー'}</Link>
-      </div>
-    </nav>)
+const TopNav: React.FC = ({ user, setUser }: Props) => {
+  const [settingsVisible, setSettingsVisible] = useState (false)
+
+  return (
+      <nav className="bg-gray-800 text-white p-3 flex justify-between items-center w-full">
+        <div className="flex items-center gap-4">
+          <Link to="/" className="text-xl font-bold text-orange-500">ぼざクリ タグ広場</Link>
+          <Link to="/posts" className="hover:text-orange-500">広場</Link>
+          <Link to="/deerjikists" className="hover:text-orange-500">ニジラー</Link>
+          <Link to="/tags" className="hover:text-orange-500">タグ</Link>
+          <Link to="/wiki" className="hover:text-orange-500">Wiki</Link>
+        </div>
+        <div className="ml-auto pr-4">
+          <Button onClick={() => setSettingsVisible (true)}>{user?.name || '名もなきニジラー'}</Button>
+          <SettingsDialogue visible={settingsVisible}
+                            onVisibleChange={setSettingsVisible}
+                            user={user}
+                            setUser={setUser} />
+        </div>
+      </nav>)
+}
 
 
 export default TopNav