diff options
Diffstat (limited to 'packages/merchant-backend-ui/src/components')
-rw-r--r-- | packages/merchant-backend-ui/src/components/Footer.tsx | 27 | ||||
-rw-r--r-- | packages/merchant-backend-ui/src/components/QR.tsx | 49 |
2 files changed, 46 insertions, 30 deletions
diff --git a/packages/merchant-backend-ui/src/components/Footer.tsx b/packages/merchant-backend-ui/src/components/Footer.tsx index 5f2957800..278e4a543 100644 --- a/packages/merchant-backend-ui/src/components/Footer.tsx +++ b/packages/merchant-backend-ui/src/components/Footer.tsx @@ -15,18 +15,21 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ -import { h, VNode } from 'preact'; -import { FooterBar } from '../styled'; + * + * @author Sebastian Javier Marchano (sebasjm) + */ +import { h, VNode } from "preact"; +import { FooterBar } from "../styled/index.js"; export function Footer(): VNode { - return <FooterBar> - <p> - <a href="https://taler.net/">Learn more about GNU Taler on our website.</a> - <p>Copyright © 2014—2021 Taler Systems SA</p> - </p> - </FooterBar> + return ( + <FooterBar> + <p> + <a href="https://taler.net/"> + Learn more about GNU Taler on our website. + </a> + <p>Copyright © 2014—2021 Taler Systems SA</p> + </p> + </FooterBar> + ); } - diff --git a/packages/merchant-backend-ui/src/components/QR.tsx b/packages/merchant-backend-ui/src/components/QR.tsx index 29c9920bf..425a94961 100644 --- a/packages/merchant-backend-ui/src/components/QR.tsx +++ b/packages/merchant-backend-ui/src/components/QR.tsx @@ -14,28 +14,41 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ - import { h, VNode } from "preact"; - import { useEffect, useRef } from "preact/hooks"; - import qrcode from "qrcode-generator"; - -export function createSVG(text:string):string { - const qr = qrcode(0, 'L'); +import { h, VNode } from "preact"; +import { useEffect, useRef } from "preact/hooks"; +import qrcode from "qrcode-generator"; + +export function createSVG(text: string): string { + const qr = qrcode(0, "L"); qr.addData(text); qr.make(); return qr.createSvgTag({ scalable: true, - margin: 0 + margin: 0, }); } - export function QR({ text }: { text: string; }):VNode { - const divRef = useRef<HTMLDivElement>(null); - useEffect(() => { - divRef.current.innerHTML = createSVG(text) - }); - - return <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}> - <div style={{ width: '50%', minWidth: 200, maxWidth: 300 }} ref={divRef} /> - </div>; - } -
\ No newline at end of file +export function QR({ text }: { text: string }): VNode { + const divRef = useRef<HTMLDivElement>(null); + useEffect(() => { + if (divRef.current) { + divRef.current.innerHTML = createSVG(text); + } + }); + + return ( + <div + style={{ + width: "100%", + display: "flex", + flexDirection: "column", + alignItems: "center", + }} + > + <div + style={{ width: "50%", minWidth: 200, maxWidth: 300 }} + ref={divRef} + /> + </div> + ); +} |