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