#49 TabGroup 作成

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