Invoice Two Table

index.js

/** @jsx jsx */
import { useState } from 'react'
import { css, jsx } from '@emotion/react'
import { Container, Row, Col, Form, Table } from 'react-bootstrap'

const customers = ['Jack', 'Sally', 'Jane', 'Mark']

const Invoice = () => {
  const [customer, setCustomer] = useState('')
  const [title, setTitle] = useState('')
  const [message, setMessage] = useState('')

  return (
    <div className="invoice" css={CSS}>
      <Container>
        <Row>
          <Col sm={6}>
            <select
              value={customer}
              onChange={(e) => setCustomer(e.target.value)}
            >
              <option value="" disabled>
                Select
              </option>

              {customers.map((c) => (
                <option key={c} value={c}>{c}</option>
              ))}
            </select>
          </Col>

          <Col sm={6}>
            <Form.Group>
              <Form.Control
                type="text"
                placeholder="Enter a title..."
                value={title}
                onChange={(e) => setTitle(e.target.value)}
              />
            </Form.Group>

            <Form.Group>
              <Form.Control
                as="textarea"
                placeholder="Enter a message..."
                value={message}
                onChange={(e) => setMessage(e.target.value)}
              />
            </Form.Group>
          </Col>
        </Row>
      </Container>

     <Container>
      <Table bordered>
          <thead>
            <tr>
              <th className="item">Item</th>
              <th>Quantity</th>
              <th>Price</th>
              <th>Amount</th>
              <th></th>
            </tr>
          </thead>

          <tbody>{/* Stuff here... */}</tbody>
        </Table>
     </Container>
    </div>
  )
}

export default Invoice

const CSS = css`
  padding: 40px 0;
`