git.iko.soy/bridge
on 64aee13 help sign in
bridge/src/components/Tabs.js
49 lines 1.3 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 ...rest
12}) {
13 const Tab = views[currentTab];
15 return (
16 <Grid className={className}>
17 <Grid.Item full as={Flex} className="b-gray3 bb1 scroll-x hidden-y">
18 <Flex.Item as={Flex}>
19 {options.map((option, i) => {
20 const isActive = option.value === currentTab;
21 const isFirst = i === 0;
23 return (
24 <Flex.Item
25 key={option.value}
26 onClick={() => onTabChange(option.value)}
27 className={cn(
28 'f5 pv3 clickable nowrap',
29 {
30 'black b-black bb1': isActive,
31 gray3: !isActive,
32 },
33 {
34 // all items have right margin/padding
35 'mr2 pr2': true,
36 // the first one is flush to the left
37 'ml2 pl2': !isFirst,
38 }
39 )}>
40 {option.text}
41 </Flex.Item>
42 );
43 })}
44 </Flex.Item>
45 </Grid.Item>
46 <Grid.Item full as={Tab} {...rest} />
47 </Grid>
48 );