forked from VinokurovVE/tests
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { ScrollAreaAutosize, Tabs } from '@mantine/core';
|
|
|
|
export interface ITabsPane {
|
|
title: string;
|
|
value: string;
|
|
view: JSX.Element;
|
|
}
|
|
|
|
export interface TabsPaneProps {
|
|
defaultTab: string;
|
|
tabs: ITabsPane[];
|
|
}
|
|
|
|
const TabsPane = ({
|
|
defaultTab,
|
|
tabs
|
|
}: TabsPaneProps) => {
|
|
return (
|
|
<Tabs defaultValue={defaultTab} mah='50%' h={'100%'} style={{
|
|
display: 'grid',
|
|
gridTemplateRows: 'min-content auto'
|
|
}}>
|
|
<ScrollAreaAutosize>
|
|
<Tabs.List>
|
|
{tabs.map((tab) => (
|
|
<Tabs.Tab key={tab.value} value={tab.value}>
|
|
{tab.title}
|
|
</Tabs.Tab>
|
|
))}
|
|
</Tabs.List>
|
|
</ScrollAreaAutosize>
|
|
|
|
|
|
<ScrollAreaAutosize h='100%' offsetScrollbars p='xs'>
|
|
{tabs.map(tab => (
|
|
<Tabs.Panel key={tab.value} value={tab.value}>
|
|
{tab.view}
|
|
</Tabs.Panel>
|
|
))}
|
|
</ScrollAreaAutosize>
|
|
</Tabs>
|
|
)
|
|
}
|
|
|
|
export default TabsPane |