File "tabs.tsx"
Full Path: /home/markqprx/iniasli.pro/client/ui/tabs/tabs.tsx
File size: 1.32 KB
MIME-type: text/html
Charset: utf-8
import React, {ReactElement, useId, useMemo, useRef} from 'react';
import clsx from 'clsx';
import {useControlledState} from '@react-stately/utils';
import {TabContext, TabsContext} from './tabs-context';
import {TabListProps} from './tab-list';
import {TabPanelsProps} from './tab-panels';
export interface TabsProps {
children: [ReactElement<TabListProps>, ReactElement<TabPanelsProps>];
size?: 'sm' | 'md';
className?: string;
selectedTab?: number;
defaultSelectedTab?: number;
onTabChange?: (newTab: number) => void;
isLazy?: boolean;
overflow?: string;
}
export function Tabs(props: TabsProps) {
const {
size = 'md',
children,
className,
isLazy,
overflow = 'overflow-hidden',
} = props;
const tabsRef = useRef<HTMLButtonElement[]>([]);
const id = useId();
const [selectedTab, setSelectedTab] = useControlledState(
props.selectedTab,
props.defaultSelectedTab || 0,
props.onTabChange
);
const ContextValue: TabsContext = useMemo(() => {
return {
selectedTab,
setSelectedTab,
tabsRef,
size,
isLazy,
id,
};
}, [selectedTab, id, isLazy, setSelectedTab, size]);
return (
<TabContext.Provider value={ContextValue}>
<div className={clsx(className, overflow, 'max-w-full')}>{children}</div>
</TabContext.Provider>
);
}