#49 TabGroup 作成

frontend/src/components/PostEditForm.tsx

@@ -34,7 +34,7 @@ export default ({ post, onSave }: Props) => {
   }, [])
 
   return (
-      <div className="max-w-xl p-4 space-y-4">
+      <div className="max-w-xl pt-2 space-y-4">
         {/* タイトル */}
         <div>
           <div className="flex gap-2 mb-1">

frontend/src/components/common/TabControl.tsx

@@ -1,25 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-type Props = { tabs:  { [key: string]: React.ReactNode }
-               init?: string }
-
-
-export default ({ tabs, init }: Props) => {
-  const [current, setCurrent] = useState<string> (init
-                                                  ?? Object.keys (tabs)?.[0]
-                                                  ?? '')
-
-  return (
-      <div className="mt-4">
-        {Object.entries (tabs).map (([name, element]) => (
-            <a href="#"
-               className="text-blue-400 hover:underline cursor-pointer"
-               onClick={(event) => {
-                 event.preventDefault ()
-                 setCurrent (name)
-               }}>
-              {name}
-            </a>))}
-        {current && tabs[current]}
-      </div>)
-}

frontend/src/components/common/TabGroup.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+
+type TabProps = { name:     string
+                  init?:    boolean
+                  children: React.ReactNode }
+
+type Props = { children: React.ReactElement<{ name: string }>[] }
+
+export const Tab = ({ children }: TabProps) => children
+
+
+export default ({ children }: Props) => {
+  const tabs = React.Children.toArray (children)
+
+  const [current, setCurrent] = useState<number> (() => {
+    const i = tabs.findIndex (tab => tab.props.init)
+    return i >= 0 ? i : 0
+  })
+
+  return (
+      <div className="mt-4">
+        <div className="flex gap-4">
+          {tabs.map ((tab, i) => (
+              <a key={i}
+                 href="#"
+                 className={`text-blue-400 hover:underline ${ i === current ? 'font-bold' : '' }`}
+                 onClick={ev => {
+                   ev.preventDefault ()
+                   setCurrent (i)
+                 }}>
+                {tab.props.name}
+              </a>))}
+        </div>
+        <div className="mt-2">
+          {tabs[current]}
+        </div>
+      </div>)
+}

frontend/src/pages/PostDetailPage.tsx

@@ -10,7 +10,7 @@ import { cn } from '@/lib/utils'
 import MainArea from '@/components/layout/MainArea'
 import TagDetailSidebar from '@/components/TagDetailSidebar'
 import PostEditForm from '@/components/PostEditForm'
-import TabControl from '@/components/common/TabControl'
+import TabGroup, { Tab } from '@/components/common/TabGroup'
 
 import type { Post, Tag, User } from '@/types'
 
@@ -95,14 +95,16 @@ export default ({ user }: Props) => {
                                        post.viewed ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-500 hover:bg-gray-600')}>
                   {post.viewed ? '閲覧済' : '未閲覧'}
                 </Button>
-                {(['admin', 'member'].includes (user.role) && editing) &&
+                <TabGroup>
-                    <TabControl tabs={{
+                  {['admin', 'member'].some (r => r === user.role) && editing &&
-                        ['編輯']: (
+                    <Tab name="編輯">
-                            <PostEditForm post={post}
+                      <PostEditForm post={post}
-                                          onSave={newPost => {
+                                    onSave={newPost => {
-                                            setPost (newPost)
+                                      setPost (newPost)
-                                            toast ({ description: '更新しました．' })
+                                      toast ({ description: '更新しました．' })
-                                          }} />) }} />}
+                                    }} />
+                    </Tab>}
+                </TabGroup>
               </div>)
            : 'Loading...'}
         </MainArea>