btrc-hub/frontend/src/components/common/TabGroup.tsx

import React, { useState } from 'react'
import { cn } from '@/lib/utils'

type TabProps = { name:     string
		  init?:    boolean
		  children: React.ReactNode }

type Props = { children: React.ReactNode }

export const Tab = ({ children }: TabProps) => <>{children}</>


export default ({ children }: Props) => {
  const tabs = React.Children.toArray (children) as React.ReactElement<TabProps>[]

  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={cn (i === current && 'font-bold')}
		 onClick={ev => {
		   ev.preventDefault ()
		   setCurrent (i)
		 }}>
		{tab.props.name}
	      </a>))}
	</div>
	<div className="mt-2">
	  {tabs[current]}
	</div>
      </div>)
}