Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 1x 1x 1x | import * as React from "react"; import styled from "styled-components"; import { Box, Text } from "rimble-ui"; import { baseColors, colors } from "../../../themes"; export interface TabsHeaderProps { tabsBorderColor?: string; } const TabsHeader = styled.ul<TabsHeaderProps>` align-items: center; border-bottom: ${(props) => props.tabsBorderColor ? `2px solid ${props.tabsBorderColor}` : `2px solid ${colors.primary.border}`}; display: flex; list-style: none; justify-content: flex-start; margin: 0; padding: 8px 8px 0; `; interface TabTitleProps { active: boolean; } const TabTitle = styled.li<TabTitleProps>` border-bottom: ${(props) => (props.active ? `2px solid ${colors.primary.base}` : "2px solid transparent")}; color: ${(props) => (props.active ? colors.primary.base : colors.silver)}; cursor: ${(props) => (props.active ? "auto" : "pointer")}; margin: 0 16px -2px; `; export interface TabsProps { activeTabName: string; tabs: Tab[]; titleFontSize?: string | number; bg?: any; tabsBorderColor?: string; subHeader?: JSX.Element; className?: string; onTabClicked(tabName: string): void; } export interface Tab { tabName: string; title: string; content: JSX.Element; } export const Tabs: React.FunctionComponent<React.PropsWithChildren<TabsProps>> = (props) => { return ( <Box bg={props.bg || baseColors.white} borderRadius={1} flexGrow="1" className={props.className}> <TabsHeader tabsBorderColor={props.tabsBorderColor}> {props.tabs.map((tab: any, i: number) => { const active = (!props.activeTabName && i === 0) || props.activeTabName === tab.tabName; return ( <TabTitle key={i} onClick={() => props.onTabClicked(tab.tabName)} active={active}> <Text mb={2} fontSize={typeof props.titleFontSize === "undefined" ? 2 : props.titleFontSize} fontWeight={3} > {tab.title} </Text> </TabTitle> ); })} </TabsHeader> {props.subHeader} {props.tabs.map((tab: any, i: number) => { if (tab.tabName !== props.activeTabName) { return undefined; } return <React.Fragment key={i}>{tab.content}</React.Fragment>; })} </Box> ); }; |