git.iko.soy/bridge
on master help sign in
bridge/src/components/Tabs.jsx
53 lines 1.5 kB history raw
1import React from 'react';
2import cn from 'classnames';
3import { Grid, Flex } from 'indigo-react';
5export default function Tabs({
6 views,
7 options,
8 currentTab,
9 onTabChange,
10 className,
11 center = false,
12 ...rest
13}) {
14 const Tab = views[currentTab];
16 return (
17 <Grid className={className}>
18 <Grid.Item full as={Flex} className="b-gray3 bb1 scroll-x hidden-y">
19 <Flex.Item as={Flex} className="flex1">
20 {options.map((option, i) => {
21 const isActive = option.value === currentTab;
22 const isFirst = i === 0;
24 return (
25 <Flex.Item
26 key={option.value}
27 onClick={() => onTabChange(option.value)}
28 className={cn(
29 'f5 pv3 pointer nowrap',
30 {
31 'black b-black bb1': isActive,
32 gray3: !isActive,
33 },
34 {
35 't-center flex1': center,
36 },
37 {
38 // all items have right margin/padding
39 'mr2 pr2': !center,
40 // the first one is flush to the left
41 'ml2 pl2': !isFirst && !center,
42 }
43 )}>
44 {option.text}
45 </Flex.Item>
46 );
47 })}
48 </Flex.Item>
49 </Grid.Item>
50 <Grid.Item full as={Tab} {...rest} />
51 </Grid>
52 );