File "tab-list.tsx"
Full Path: /home/markqprx/iniasli.pro/client/ui/tabs/tab-list.tsx
File size: 1.46 KB
MIME-type: text/plain
Charset: utf-8
import React, {Children, cloneElement, isValidElement, ReactNode} from 'react';
import clsx from 'clsx';
import {FocusScope} from '@react-aria/focus';
import {TabProps} from './tab';
import {TabLine} from './tab-line';
export interface TabListProps {
children: ReactNode;
// center tabs within tablist
center?: boolean;
// expand tabs to fill in tablist space fully. By default, tabs are only as wide as their content.
expand?: boolean;
className?: string;
}
export function TabList({children, center, expand, className}: TabListProps) {
const childrenArray = Children.toArray(children);
return (
<FocusScope>
<div
className={clsx(
// hide scrollbar completely on mobile, show compact one on desktop
'flex relative max-w-full overflow-auto border-b max-sm:hidden-scrollbar md:compact-scrollbar',
className
)}
role="tablist"
aria-orientation="horizontal"
>
{childrenArray.map((child, index) => {
if (isValidElement<TabProps>(child)) {
return cloneElement<TabProps>(child, {
index,
className: clsx(
child.props.className,
expand && 'flex-auto',
center && index === 0 && 'ml-auto',
center && index === childrenArray.length - 1 && 'mr-auto'
),
});
}
return null;
})}
<TabLine />
</div>
</FocusScope>
);
}