Advanced with QR

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>;