import styled from "@emotion/styled" ; import React from "react" ; import Card from "./card" ; import { colors , fontMedium } from "../styles/variables" ; export type ColEl = React . ReactNode ; interface Props { title : string ; rowHeaders : string [ ] ; rows : ColEl [ ] [ ] ; } const colStyle = `
  padding: 1rem 0.75em;
  border-top: 1px solid ${ colors . border };
` ; const Td = styled . td `
  ${ colStyle }
` ; const Tr = styled . tr `
  :hover {
    background-color: ${ colors . gardenGreenLight };
  }
` ; const THead = styled . thead `
  color: ${ colors . gardenGray };
  text-align: left;
` ; const Th = styled . th `
  ${ fontMedium }
  ${ colStyle }
  color: grey;
` ; const TableEl = styled . table `
  border-collapse: collapse;
  width: 100%;
` ; const Table = ( props ) => ( < Card title = { props . title } > < TableEl > < THead > < tr > { props . rowHeaders . map ( ( header ) => ( < Th key = { header } > { header } < /Th>))} < /tr> < /THead> < tbody > { props . rows . map ( ( row , idx ) => ( < Tr key = { idx } > { row . map ( ( col , cidx ) => { return < Td key = { cidx } > { col } < /Td>; } ) } < /Tr>))} < /tbody> < /TableEl> < /Card>); export default Table ;