44 行
965 B
TypeScript
44 行
965 B
TypeScript
import type { FC } from 'react'
|
|
|
|
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}</>
|
|
|
|
|
|
const TabGroup: FC<Props> = ({ children }) => {
|
|
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>)
|
|
}
|
|
|
|
export default TabGroup
|