git.iko.soy/bridge
on 4e06b3a help sign in
bridge/src/components/Tabs.js
51 lines 1.4 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 tabClassName,
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 tabClassName,
30 'f5 pv3 pointer nowrap',
31 {
32 'black b-black bb1': isActive,
33 gray3: !isActive,
34 },
35 {
36 // all items have right margin/padding
37 'mr2 pr2': true,
38 // the first one is flush to the left
39 'ml2 pl2': !isFirst,
40 }
41 )}>
42 {option.text}
43 </Flex.Item>
44 );
45 })}
46 </Flex.Item>
47 </Grid.Item>
48 <Grid.Item full as={Tab} {...rest} />
49 </Grid>
50 );