1 | import { Footnote, PageBottom, Tailwind, CSS } from "@fileforge/react-print"; |
2 | import { QRCodeSVG } from "qrcode.react"; |
3 | import { ArrowRightIcon } from "@heroicons/react/20/solid"; |
4 | |
5 | <Tailwind> |
6 | <CSS> |
7 | {`@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); |
8 | |
9 | @page { |
10 | size: a4; |
11 | margin: .75in .75in 1in .75in; |
12 | } |
13 | `} |
14 | </CSS> |
15 | <div className="font-[inter] text-slate-800"> |
16 | <div className="bg-slate-100 -z-10 absolute -bottom-[1in] -right-[.75in] -left-[.75in] rounded-t-[.75in] h-[20vh]"></div> |
17 | <PageBottom> |
18 | <div className="text-xs text-slate-400 border-t border-t-slate-300 py-4 mt-4 flex border-b border-b-slate-300"> |
19 | <div>Invoice #1234</div> |
20 | <div className="flex-grow" /> |
21 | <div> |
22 | Powered by{" "} |
23 | <a |
24 | href="https://kubefinance.com" |
25 | target="_blank" |
26 | className="underline underline-offset-2 " |
27 | > |
28 | Kube |
29 | </a> |
30 | </div> |
31 | </div> |
32 | </PageBottom> |
33 | <div className="flex items-start"> |
34 | <div> |
35 | <svg |
36 | version="1.1" |
37 | id="Layer_1" |
38 | xmlns="http://www.w3.org/2000/svg" |
39 | x="0px" |
40 | y="0px" |
41 | viewBox="0 0 24 24" |
42 | className="w-16 mb-12 fill-slate-800" |
43 | > |
44 | <g> |
45 | <path |
46 | d="M22.45,12.12c0-2.91-0.99-5.33-3.03-7.34C17.42,2.76,14.96,1.74,12,1.74c-2.93,0-5.4,1.02-7.43,3.05 |
47 | C2.56,6.8,1.55,9.26,1.55,12.15c0,0.84,0.11,1.63,0.27,2.37l9.71-7.65h5.01v14.58c1.06-0.5,2.03-1.13,2.91-1.99 |
48 | C21.46,17.45,22.45,15.01,22.45,12.12z" |
49 | /> |
50 | <path d="M4.91,19.78c1.4,1.26,3.03,2.12,4.9,2.48v-6.32L4.91,19.78z" /> |
51 | </g> |
52 | </svg> |
53 | <h1 className="text-2xl font-bold">Invoice #10928</h1> |
54 | <p className="text-slate-400 mb-8 pt-1"> |
55 | February 1<sup>st</sup>, 2024 |
56 | </p> |
57 | </div> |
58 | <div className="flex-grow" /> |
59 | <div className="bg-[#5a2489] shadow-xl ring-white ring-4 shadow-[#5a2489]/20 text-white p-1 rounded-[0.625rem] w-1/2"> |
60 | <div className="flex items-center text-xs text-white"> |
61 | <img |
62 | className="ml-2 h-4 m-1 mb-2" |
63 | src="https://framerusercontent.com/images/c65IbugacMOpovnRr8ETn6Pm7Sk.png" |
64 | /> |
65 | </div> |
66 | <div className="flex bg-white rounded-md text-slate-800 items-stretch"> |
67 | <div className="flex-grow flex flex-col p-3 pt-2"> |
68 | <div className="text-sm text-[#5a2489] flex items-center"> |
69 | Pay online |
70 | <ArrowRightIcon className="h-4 fill-current ml-1" /> |
71 | </div> |
72 | <div className="basis-0 flex-grow" /> |
73 | <div className="text-2xl font-mono font-bold pb-2"> |
74 | $1,035.00 |
75 | <Footnote style={{ footnoteDisplay: "inline" }}> |
76 | This payment may be installed in 3 monthly payments of $345.00. |
77 | For more client information, check out{" "} |
78 | <a |
79 | href="https://www.kubefinance.com/" |
80 | target="_blank" |
81 | className="underline" |
82 | > |
83 | www.kubefinance.com/#faq |
84 | </a> |
85 | . |
86 | </Footnote> |
87 | </div> |
88 | <div className="text-xs text-slate-400 border-t border-t-slate-200 pt-2"> |
89 | Due by March 1<sup>st</sup>, 2024 |
90 | </div> |
91 | </div> |
92 | <div> |
93 | <div className="p-2 bg-white rounded-md"> |
94 | <QRCodeSVG |
95 | className="h-32 rounded-sm overflow-hidden" |
96 | value="https://www.kubefinance.com/" |
97 | size={128} |
98 | bgColor="white" |
99 | fgColor="#5a2489" |
100 | /> |
101 | </div> |
102 | </div> |
103 | </div> |
104 | </div> |
105 | </div> |
106 | <div className="p-6 rounded-xl mt-6 -mx-6"> |
107 | <h2 className="mb-2 text-xs font-bold text-slate-500 uppercase">Payee</h2> |
108 | <div className="flex"> |
109 | <div className="basis-0 flex-grow gap-4"> |
110 | <h2 className="font-bold">Acme Inc.</h2> |
111 | 1234 Main St. |
112 | <br /> |
113 | Springfield, IL 62701 |
114 | </div> |
115 | <div className="basis-0 flex-grow"> |
116 | (000) 123-4567 |
117 | <br /> |
118 | billing@acme.com |
119 | <br /> |
120 | acme.com |
121 | </div> |
122 | </div> |
123 | </div> |
124 | <div className="p-6 bg-slate-100 rounded-xl -mx-6 mb-6"> |
125 | <div className="flex"> |
126 | <div className="basis-0 flex-grow gap-4"> |
127 | <h2 className="mb-2 text-xs font-bold text-slate-500 uppercase"> |
128 | Payor |
129 | </h2> |
130 | <h2 className="font-bold">Acme Inc.</h2> |
131 | 1234 Main St. |
132 | <br /> |
133 | Springfield, IL 62701 |
134 | </div> |
135 | <div className="basis-0 flex-grow"> |
136 | <h2 className="mb-2 text-xs font-bold text-slate-500 uppercase"> |
137 | Invoice details |
138 | </h2> |
139 | <b>$1,234.00</b> |
140 | <br /> |
141 | Due by March 1<sup>st</sup>, 2024 |
142 | <Footnote style={{ footnoteDisplay: "inline" }}> |
143 | Late payments are subject to a 5% fee, compounding monthly. |
144 | </Footnote> |
145 | <br /> |
146 | Terms: Net 30 |
147 | </div> |
148 | </div> |
149 | </div> |
150 | <h2 className="mb-2 text-xs font-bold text-slate-500 uppercase">Details</h2> |
151 | <table className="w-full my-2 border-collapse"> |
152 | <tr className="border-b font-bold text-slate-500"> |
153 | <th className="text-left py-3">Item</th> |
154 | <th className="text-left py-3">Quantity</th> |
155 | <th className="text-right py-3">Price</th> |
156 | <th className="text-right py-3">Total</th> |
157 | </tr> |
158 | <tr className="border-b"> |
159 | <td className="text-left py-3">Magic</td> |
160 | <td className="text-left py-3">2</td> |
161 | <td className="text-right py-3">$456.00</td> |
162 | <td className="text-right py-3">$912.00</td> |
163 | </tr> |
164 | <tr className="border-b"> |
165 | <td className="text-left py-3">Widget</td> |
166 | <td className="text-left py-3">1</td> |
167 | <td className="text-right py-3">$123.00</td> |
168 | <td className="text-right py-3">$123.00</td> |
169 | </tr> |
170 | <tr className="py-2"> |
171 | <td /> |
172 | <td /> |
173 | <td /> |
174 | <td className="text-right py-3"> |
175 | <b>$1,035.00</b> |
176 | </td> |
177 | </tr> |
178 | </table> |
179 | </div> |
180 | </Tailwind>; |