htmldocs is a React library for
building and generating documents

1function Invoice({ customer, items }) {
2  const invoiceId = generateId()
3  const issueDate = formatDate(new Date())
4
5  // 7 days from now
6  const dueDate = formatDate(Date.now() + 7 * 24 * 60 * 60 * 1000)
7
8  return (
9    <Document size="A4" orientation="portrait" margin="0.5in">
10      <Page>
11        <div className="flex flex-col h-full space-y-3">
12          <div className="flex items-center justify-between">
13            <div className="flex flex-col">
14              <div className="text-black text-lg font-semibold leading-tight">
15                Invoice
16              </div>
17              <div className="text-gray-500 text-[10px]">
18                {invoiceId}
19              </div>
20            </div>
21            <img src="logo.svg" />
22          </div>
23
24          <Header
25            issueDate={issueDate}
26            dueDate={dueDate}
27            customer={customer}
28          />
29
30          <ItemsTable items={items} />
31
32          <div className="h-full flex-1"></div>
33
34          <Footer />
35        </div>
36      </Page>
37    </Document>
38  )
39}
40

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
}]