Invoice 3

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 itemInitializer = {
  description: '',
  qty: '',
  price: '',
  amount: ''
}

const Invoice = () => {
  const [customer, setCustomer] = useState('')
  const [title, setTitle] = useState('')
  const [message, setMessage] = useState('')
  const [items, setItems] = useState([{ ...itemInitializer }])

  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>
            {items.map((item, i) => (
              <tr key={i}>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            ))}
          </tbody>
        </Table>
      </Container>
    </div>
  )
}

export default Invoice

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