#49 TabGroup 作成

2025-06-26 23:44:17 +09:00
parent a95b278599
commit ba1c1f1adf
4 changed files with 50 additions and 35 deletions
@@ -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>)
-}
@@ -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>)
+}