#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>)
+}