28 lines
808 B
React
28 lines
808 B
React
|
import { Flex, Tabs } from '@chakra-ui/react'
|
||
|
|
|
||
|
|
// This component needs to be nested inside of a Tabs.Root to work properly
|
||
|
|
export function CanvasHeaderTabs({ view, onChangeView, tabs }) {
|
||
|
|
return (
|
||
|
|
<Flex
|
||
|
|
as="header"
|
||
|
|
position="sticky"
|
||
|
|
top="0"
|
||
|
|
zIndex="dropdown" // zIndex: 1100
|
||
|
|
bg="base200"
|
||
|
|
px={5}
|
||
|
|
pt={3}
|
||
|
|
pb={2}
|
||
|
|
align="center"
|
||
|
|
justify="space-between"
|
||
|
|
width="100%"
|
||
|
|
>
|
||
|
|
<Tabs.List>
|
||
|
|
{tabs.map(({ value, label }) =>
|
||
|
|
<Tabs.Trigger key={value} value={value} fontSize="lg">
|
||
|
|
{ label }
|
||
|
|
</Tabs.Trigger>
|
||
|
|
)}
|
||
|
|
</Tabs.List>
|
||
|
|
</Flex>
|
||
|
|
)
|
||
|
|
}
|