65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { TabPanel } from './TabPanel';
|
|
import { TabsProps } from './types';
|
|
|
|
export const Tabs = ({ tabs }: TabsProps) => {
|
|
const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
|
|
|
|
const handleTabPress = (index: number) => () => {
|
|
setActiveTabIndex(index);
|
|
};
|
|
|
|
function classNames(...classes: any) {
|
|
return classes.filter(Boolean).join(' ');
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="sm:hidden">
|
|
<label htmlFor="tabs" className="sr-only">
|
|
Select a tab
|
|
</label>
|
|
<select
|
|
id="tabs"
|
|
name="tabs"
|
|
className="block w-full focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md"
|
|
// defaultValue={tabs ? tabs.find((tab) => tab.current).name : undefined}
|
|
>
|
|
{tabs.map((tab) => (
|
|
<option key={tab.name}>{tab.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="hidden sm:block">
|
|
<nav className="flex space-x-4" aria-label="Tabs">
|
|
{tabs.map((tab, tabIndex) => (
|
|
<a
|
|
onClick={handleTabPress(tabIndex)}
|
|
key={tab.name}
|
|
className={classNames(
|
|
activeTabIndex === tabIndex
|
|
? 'bg-gray-100 text-gray-700'
|
|
: 'text-gray-500 hover:text-gray-700 hover:bg-gray-50',
|
|
'px-3 py-2 font-medium text-sm rounded-md cursor-pointer',
|
|
)}
|
|
aria-current={activeTabIndex === tabIndex ? 'page' : undefined}
|
|
>
|
|
{tab.name}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{tabs.map(({ component, name, disabled }, index) =>
|
|
disabled ? (
|
|
<React.Fragment key={name} />
|
|
) : (
|
|
<TabPanel key={name} isActive={activeTabIndex === index}>
|
|
{component}
|
|
</TabPanel>
|
|
),
|
|
)}
|
|
</>
|
|
);
|
|
};
|