fix storybook example to show QR details

1 files changed, 10 insertions, 6 deletions

diff --git a/packages/backend/src/components/QR.tsx b/packages/backend/src/components/QR.tsx
index 95aee36..4418f1c 100644
--- a/packages/backend/src/components/QR.tsx
+++ b/packages/backend/src/components/QR.tsx
@@ -18,15 +18,19 @@
  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,
+  });
+}
+
  export function QR({ text }: { text: string; }):VNode {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
-     const qr = qrcode(0, 'L');
-     qr.addData(text);
-     qr.make();
-     divRef.current.innerHTML = qr.createSvgTag({
-       scalable: true,
-     });
+     divRef.current.innerHTML = createSVG(text)
    });
  
    return <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>