#49 TabGroup 作成

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) &&
-                    <TabControl tabs={{
-                        ['編輯']: (
-                            <PostEditForm post={post}
-                                          onSave={newPost => {
-                                            setPost (newPost)
-                                            toast ({ description: '更新しました．' })
-                                          }} />) }} />}
+                <TabGroup>
+                  {['admin', 'member'].some (r => r === user.role) && editing &&
+                    <Tab name="編輯">
+                      <PostEditForm post={post}
+                                    onSave={newPost => {
+                                      setPost (newPost)
+                                      toast ({ description: '更新しました．' })
+                                    }} />
+                    </Tab>}
+                </TabGroup>
               </div>)
            : 'Loading...'}
         </MainArea>