htmldocs is a React library for
building and generating documents

function Invoice({ customer, items }) {
  const invoiceId = generateId()
  const issueDate = formatDate(new Date())

  // 7 days from now
  const dueDate = formatDate(Date.now() + 7 * 24 * 60 * 60 * 1000)

  return (
    <Document size="A4" orientation="portrait" margin="0.5in">
      <Page>
        <div className="flex flex-col h-full space-y-3">
          <div className="flex items-center justify-between">
            <div className="flex flex-col">
              <div className="text-black text-lg font-semibold leading-tight">
                Invoice
              </div>
              <div className="text-gray-500 text-[10px]">
                {invoiceId}
              </div>
            </div>
            <img src="logo.svg" />
          </div>

          <Header
            issueDate={issueDate}
            dueDate={dueDate}
            customer={customer}
          />

          <ItemsTable items={items} />

          <div className="h-full flex-1"></div>

          <Footer />
        </div>
      </Page>
    </Document>
  )
}

const customer = {
  name: "Cookie Monster",
  address: "123 Sesame Street",
  city: "New York",
  state: "NY",
  zip: "10036",
  phone: "123-1234-1234"
}

const items = [
{
    name: "Chocolate chip cookie",
    description: "Really yummy!",
    price: 4.5,
    quantity: 1
},
{
    name: "White macadamia cookie",
    description: "A bit more unique",
    price: 4.5,
    quantity: 2
}]