Invoice 1

index.js

/** @jsx jsx */
import { useState } from 'react'
import { css, jsx } from '@emotion/react'
import { Container, Row, Col, Form } 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>
    </div>
  )
}

export default Invoice

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