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}>; 11 12export const Cell = ({ children, fitContent = false, textAlign = TextAlign.Left }: CellProps) => ( 13 <td css={[tableCellStyle, { textAlign }, fitContent && fitContentStyle]}>{children}</td> 14); 15 16const tableCellStyle = css({ 17 padding: spacing[4], 18 verticalAlign: 'middle', 19 wordBreak: 'break-word', 20 borderRight: `1px solid ${theme.border.default}`, 21 22 '&:last-child': { 23 borderRight: 0, 24 }, 25}); 26 27const fitContentStyle = css({ 28 width: 'fit-content', 29 wordBreak: 'initial', 30}); 31