import React from "react";
import tw, {styled} from "twin.macro"
import 'styled-components/macro'

export function Table(props) {
  return <div tw="block w-full overflow-x-auto text-secondary">
    <table tw="items-center w-full bg-transparent border-collapse">
      {props.children}
    </table>
  </div>;
}


const TablePart = styled.td(tw`border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4`)
export {TablePart}

const TableHeader = styled.th(tw`px-6 py-3 align-middle text-xs uppercase whitespace-nowrap font-bold text-left text-secondary border-b-2 border-secondary`)
export {TableHeader}