import * as React from 'react';
import { Tab, TabList, TabPanel, Tabs as ReactTabs } from 'react-tabs';
import styled from 'styled-components';
import { colors } from 'ts/variables';
import { Breakout } from './Breakout';
const StyledTabList = styled(TabList)`
text-transform: uppercase;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
`;
const StyledTab = styled(Tab)`
height: 2.5rem;
padding-left: 1rem;
padding-right: 1rem;
display: flex;
justify-content: space-around;
align-items: center;
float: left;
&:not(:first-of-type) {
margin-left: 0.25rem;
}
`;
const Root =
styled.div <
{ colors: any } >
`
${StyledTab} {
background-color: ${props => props.theme.colors.secondary};
&[aria-selected="true"] {
background-color: ${colors.gray};
}
&[aria-selected="false"]:focus,
&[aria-selected="false"]:hover {
background-color: ${props => props.theme.colors.secondary_alt};
cursor: pointer;
}
}
`;
const Tabs: React.StatelessComponent<{}> = props => (
{React.Children.map(props.children, child => {
const { title } = React.cloneElement(child as React.ReactElement).props;
return {title};
})}
{React.Children.map(props.children, child => {child})}
);
interface TabBlockProps {
title: string;
}
const TabBlock: React.StatelessComponent = props => {props.children};
const ContextTabs = Tabs;
export { ContextTabs as Tabs, TabBlock };