1import { css } from '@emotion/react'; 2import { spacing, theme } from '@expo/styleguide'; 3import React, { PropsWithChildren } from 'react'; 4 5import { TextAlign } from './types'; 6 7type CellProps = PropsWithChildren<{ 8 fitContent?: boolean; 9 textAlign?: TextAlign; 10 colSpan?: number; 11}>; 12 13export const Cell = ({ 14 children, 15 colSpan, 16 fitContent = false, 17 textAlign = TextAlign.Left, 18}: CellProps) => ( 19 <td css={[tableCellStyle, { textAlign }, fitContent && fitContentStyle]} colSpan={colSpan}> 20 {children} 21 </td> 22); 23 24const tableCellStyle = css({ 25 padding: spacing[4], 26 verticalAlign: 'middle', 27 borderRight: `1px solid ${theme.border.default}`, 28 29 '&:last-child': { 30 borderRight: 0, 31 }, 32}); 33 34const fitContentStyle = css({ 35 width: 'fit-content', 36}); 37