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