elements.tsx

import styled from '../../../styled-components'

export const TableComponent = styled.table`
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
`

export const Headers = styled.thead``

export const Header = styled<
  {
    width: string
  },
  'th'
>('th')`
  text-align: left;
  width: ${({ width }) => width};
  font-size: ${({ theme }) => theme.fontSize.small};
`

export const Body = styled.tbody``

export const RowComponent = styled.tr``

export const CellComponent = styled<
  {
    wordwrap?: string
    mono?: boolean
    colSpan?: number
  },
  'td'
>('td').attrs({
  colSpan: ({ colSpan }) => colSpan,
})`
  font-family: ${({ mono }) => (mono ? 'monospace' : 'inherit')};
  word-wrap: ${({ wordwrap }) => wordwrap || 'normal'};
`