jsx import { CSSObject , jsx } from '@emotion/core' ; import React from 'react' ; import { COLOR } from '../Identity' ; import type { Theme } from '../Layout' ; import { TextProps , textStyle } from '../Text' ; import { filterProps } from '../util' ; export type TabBarProps < T = HTMLDivElement > = React . HTMLProps < T > ; const tabBarStyle = ( { } ) => { return { display : 'flex' , width : '100%' , } ; } ; const filteredTabBarProps = ( props ) => filterProps ( props , [ ] ) ; export const TabBar = ( { children = null , ... props } ) => ( < div css = { tabBarStyle ( props ) } { ... filteredTabBarProps ( props ) } > { children } < /div>); export interface TabBarItemProps < T = HTMLSpanElement > extends TextProps < T > { active : boolean ; } const tabBarItemStyle = ( theme , { block = true , center = true , color = theme . general . color , bold = true , active = false , fontSize = '11px' , textTransform = 'uppercase' , ... props } ) => { return { ... textStyle ( theme , { block , bold , center , color , fontSize , textTransform , ... props } ) , borderBottom : active ? `1px solid ${ COLOR . GRAY_DARKEN_48 }` : `1px solid ${ COLOR . GRAY_LIGHTEN_40 }` , cursor : 'pointer' , display : 'flex' , flexGrow : 1 , justifyContent : 'center' , opacity : active ? 1 : 0.56 , padding : '8px 0' , } ; } ; export const TabBarItem = ( { children = null , ... props } ) => ( < span css = { theme => tabBarItemStyle ( theme , props ) } { ... props } > { children } < /span>);