1import { css } from '@emotion/react'; 2import { theme, borderRadius } from '@expo/styleguide'; 3import React, { PropsWithChildren } from 'react'; 4 5import { TableHeaders } from './TableHeaders'; 6import { TextAlign } from './types'; 7 8type TableProps = PropsWithChildren<{ 9 headers?: string[]; 10 headersAlign?: TextAlign[]; 11}>; 12 13export const Table = ({ children, headers = [], headersAlign }: TableProps) => ( 14 <div css={tableWrapperStyle}> 15 <table css={tableStyle}> 16 {headers.length ? ( 17 <> 18 <TableHeaders headers={headers} headersAlign={headersAlign} /> 19 <tbody>{children}</tbody> 20 </> 21 ) : ( 22 children 23 )} 24 </table> 25 </div> 26); 27 28const tableWrapperStyle = css({ 29 borderWidth: 1, 30 borderStyle: 'solid', 31 borderColor: theme.border.default, 32 borderRadius: borderRadius.medium, 33 overflow: 'hidden', 34 marginBottom: '1rem', 35}); 36 37const tableStyle = css({ border: 0, borderRadius: 0, marginBottom: 0, fontSize: 14 }); 38