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