1import { css } from '@emotion/react'; 2import { spacing, theme, typography } from '@expo/styleguide'; 3import React, { PropsWithChildren } from 'react'; 4 5import { TextAlign } from './types'; 6 7type HeaderCellProps = PropsWithChildren<{ 8 textAlign?: TextAlign; 9}>; 10 11export const HeaderCell = ({ children, textAlign = TextAlign.Left }: HeaderCellProps) => ( 12 <th css={[tableHeadersCellStyle, { textAlign }]}>{children}</th> 13); 14 15const tableHeadersCellStyle = css({ 16 padding: spacing[4], 17 fontFamily: typography.fontFaces.medium, 18 verticalAlign: 'middle', 19 borderRight: `1px solid ${theme.border.default}`, 20 21 '&:last-child': { 22 borderRight: 0, 23 }, 24}); 25