1import { css } from '@emotion/react'; 2import { spacing, theme, typography } from '@expo/styleguide'; 3import { Tab as ReachTab, TabProps } from '@reach/tabs'; 4 5type Props = TabProps & { 6 selected?: boolean; 7}; 8 9export const TabButton = ({ selected, ...props }: Props) => ( 10 <ReachTab 11 {...props} 12 css={tabButtonStyles} 13 style={{ 14 borderBottomColor: selected ? theme.palette.primary[400] : 'transparent', 15 color: selected ? theme.text.default : theme.text.secondary, 16 }} 17 /> 18); 19 20const tabButtonStyles = css({ 21 ...typography.fontSizes[15], 22 fontFamily: typography.fontFaces.medium, 23 transition: 'all 0.05s ease 0s', 24 padding: `${spacing[2.5]}px ${spacing[6]}px ${spacing[2] - 1}px`, 25 border: 0, 26 borderBottom: '0.2rem solid transparent', 27 borderRight: `1px solid ${theme.border.default}`, 28 backgroundColor: 'transparent', 29 cursor: 'pointer', 30 31 '&:hover': { 32 backgroundColor: theme.background.secondary, 33 }, 34}); 35