1import { Footnote, PageBottom, Tailwind } from "@fileforge/react-print";
2
3<Tailwind>
4 <div>
5 <div className="flex justify-between items-end pb-4 mb-8">
6 <div>
7 <h1 className="text-2xl font-bold">Invoice #1234</h1>
8 <p className="text-xs">January 1, 2025</p>
9 </div>
10 <svg
11 xmlns="http://www.w3.org/2000/svg"
12 x="0"
13 y="0"
14 enableBackground="new 0 0 46.15 9.31"
15 version="1.1"
16 viewBox="0 0 46.15 9.31"
17 xmlSpace="preserve"
18 fill="black"
19 {...props}
20 >
21 <path d="M10 9.13V2.55h1.83v.91c.35-.62 1.13-1.09 2.07-1.09.71 0 1.32.24 1.81.71s.74 1.15.74 2.03v4.02h-1.88V5.6c0-.96-.5-1.5-1.28-1.5-.85 0-1.42.62-1.42 1.55v3.48H10zM23.84 6.48h-4.83c.23.83.83 1.24 1.79 1.24.74 0 1.43-.22 2.05-.64l.74 1.28c-.8.61-1.76.91-2.88.91-1.16 0-2.05-.34-2.67-1-.61-.66-.92-1.47-.92-2.45 0-1 .32-1.81.96-2.46.64-.66 1.48-.98 2.51-.98.97 0 1.76.3 2.39.89.62.59.94 1.39.94 2.41-.01.23-.04.5-.08.8zM19 5.13h3.09c-.18-.76-.73-1.22-1.51-1.22-.76 0-1.38.46-1.58 1.22zM29.43 0h1.88v9.13h-1.82v-.71c-.52.59-1.16.88-1.96.88-.92 0-1.69-.32-2.31-.98-.61-.66-.92-1.47-.92-2.47 0-.98.31-1.8.92-2.46.62-.66 1.39-1 2.31-1 .74 0 1.38.26 1.89.8V0zm-.39 4.6c-.31-.34-.71-.5-1.2-.5s-.89.17-1.21.5c-.31.34-.47.74-.47 1.22 0 .49.16.91.47 1.25.32.34.72.5 1.21.5s.89-.17 1.2-.5c.32-.34.48-.76.48-1.25 0-.47-.15-.88-.48-1.22zM33.03 8.31c-.66-.67-.98-1.5-.98-2.47s.32-1.8.98-2.46c.66-.67 1.51-1.01 2.55-1.01 1.04 0 1.91.34 2.57 1.01.66.66 1 1.49 1 2.46s-.34 1.8-1 2.47c-.66.66-1.52 1-2.57 1-1.04 0-1.89-.34-2.55-1zm3.74-3.68c-.32-.34-.72-.5-1.19-.5s-.86.17-1.19.5c-.32.32-.48.73-.48 1.2 0 .49.16.9.48 1.24.32.32.72.49 1.19.49s.86-.17 1.19-.49c.32-.34.49-.74.49-1.24 0-.47-.17-.88-.49-1.2zM40.5 8.31c-.65-.65-.97-1.47-.97-2.48s.32-1.83.98-2.47c.66-.65 1.5-.97 2.54-.97 1.36 0 2.55.67 3.09 1.87l-1.5.8c-.38-.62-.9-.94-1.56-.94-.49 0-.89.17-1.21.49-.32.32-.48.73-.48 1.21 0 .49.16.91.47 1.24.32.32.72.48 1.2.48.66 0 1.27-.38 1.55-.92l1.52.9c-.58 1.07-1.74 1.75-3.12 1.75-1.02 0-1.86-.32-2.51-.96zM9.26 4.7c0-1.29-.44-2.36-1.34-3.25C7.03.55 5.94.1 4.63.1c-1.3 0-2.39.45-3.29 1.35C.45 2.34 0 3.43 0 4.71c0 .37.05.72.12 1.05l4.3-3.39h2.22v6.46c.47-.22.9-.5 1.29-.88.89-.89 1.33-1.97 1.33-3.25z"></path>
22 <path d="M1.49 8.09c.62.56 1.34.94 2.17 1.1v-2.8l-2.17 1.7z"></path>
23 </svg>
24 </div>
25
26 <div className="text-right">
27 <p className="p-0 mb-1">
28 <b>Onedoc, Inc</b>
29 </p>
30 <p className="p-0 mb-1">1600 Pennsylvania Avenue NW,</p>
31 <p className="p-0 mb-1">Washington,</p>
32 <p className="p-0 mb-1">DC 20500,</p>
33 <p className="p-0 mb-1">United States of America</p>
34 </div>
35
36 <div className="h-px bg-gray-300 my-4" />
37
38 <div>
39 <p className="p-0 mb-1">
40 <b>Bill to:</b>
41 </p>
42 <p className="p-0 mb-1">Titouan LAUNAY</p>
43 <p className="p-0 mb-1">72 Faxcol Dr Gotahm City,</p>
44 <p className="p-0 mb-1">NJ 12345,</p>
45 <p className="p-0 mb-1">United States of America</p>
46 </div>
47
48 <div className="h-px bg-gray-300 my-4" />
49
50 <p className="p-0 leading-5">
51 All items below correspond to work completed in the month of January 2024.
52 Payment is due within 15 days of receipt of this invoice.
53 <Footnote>This includes non-business days.</Footnote>
54 </p>
55
56 <table className="w-full my-12">
57 <tr className="border-b border-gray-300">
58 <th className="text-left font-bold py-2">Item</th>
59 <th className="text-left font-bold py-2">Description</th>
60 <th className="text-left font-bold py-2">Unit Price</th>
61 <th className="text-left font-bold py-2">Quantity</th>
62 <th className="text-left font-bold py-2">Amount</th>
63 </tr>
64
65 <tr className="border-b border-gray-300">
66 <td className="py-2">1</td>
67 <td className="py-2">Onedoc Startup Subscription</td>
68 <td className="py-2">$100</td>
69 <td className="py-2">1</td>
70 <td className="py-2">$100</td>
71 </tr>
72 <tr className="border-b border-gray-300">
73 <td className="py-2">2</td>
74 <td className="py-2">Onedoc support</td>
75 <td className="py-2">$0</td>
76 <td className="py-2">1</td>
77 <td className="py-2">$0</td>
78 </tr>
79
80 <tr className="border-b border-gray-300">
81 <th className="text-left font-bold py-2"></th>
82 <th className="text-left font-bold py-2">Total</th>
83 <th className="text-left font-bold py-2"></th>
84 <th className="text-left font-bold py-2"></th>
85 <th className="text-left font-bold py-2">$100</th>
86 </tr>
87 </table>
88
89 <div className="bg-blue-100 p-3 rounded-md border-blue-300 text-blue-800 text-sm">
90 On January 1st 2024, Onedoc users will be upgraded free of charge to our
91 new cloud offering.
92 </div>
93
94 <PageBottom>
95 <div className="h-px bg-gray-300 my-4" />
96 <div className="text-gray-400 text-sm">Invoice #1234</div>
97 </PageBottom>
98 </div>
99</Tailwind>;