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