36 lines
999 B
TypeScript
36 lines
999 B
TypeScript
import { classNames } from '@standardnotes/utils'
|
|
import { ComponentPropsWithoutRef } from 'react'
|
|
import { useTabStateContext } from './useTabState'
|
|
|
|
type Props = { id: string } & ComponentPropsWithoutRef<'button'>
|
|
|
|
const Tab = ({ id, className, children, ...props }: Props) => {
|
|
const { state } = useTabStateContext()
|
|
const { activeTab, setActiveTab } = state
|
|
|
|
const isActive = activeTab === id
|
|
|
|
return (
|
|
<button
|
|
role="tab"
|
|
id={`tab-control-${id}`}
|
|
onClick={() => {
|
|
setActiveTab(id)
|
|
}}
|
|
aria-selected={isActive}
|
|
aria-controls={`tab-panel-${id}`}
|
|
className={classNames(
|
|
'relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner',
|
|
isActive ? 'font-medium text-info' : 'text-text',
|
|
isActive && 'after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-info',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default Tab
|