feat: add bc logo to qrcode

package.json

@@ -41,7 +41,7 @@
     "react-day-picker": "^8.7.1",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.44.3",
-    "react-qr-code": "^2.0.11",
+    "react-qrcode-logo": "^2.9.0",
     "tailwind-merge": "^1.13.0",
     "tailwindcss": "3.3.2",
     "tailwindcss-animate": "^1.0.5",

src/app/beanconqueror/share/create/components/share-card.tsx

@@ -25,8 +25,15 @@ const ShareCard = ({bcUrl, beanLinkResponse}: {bcUrl: string, beanLinkResponse:
             <CardTitle>Share or import</CardTitle>
         </CardHeader>
         <CardContent className={"flex flex-col space-y-2"}>
-            {beanLinkResponse?.link && <BeanLinkCard response={beanLinkResponse} />}
-            <QRCodeCard value={bcUrl} />
+            {beanLinkResponse?.link && (
+                <>
+                    <BeanLinkCard response={beanLinkResponse} />
+                    <QRCodeCard value={beanLinkResponse.link} />
+                </>
+            )}
+            {!beanLinkResponse?.link && (
+                <QRCodeCard value={bcUrl} />
+            )}
         </CardContent>
     </Card>
 );

src/components/qrcode-card.tsx

@@ -1,19 +1,23 @@
 import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
-import QRCode from "react-qr-code";
-import Image from "next/image";
+import { QRCode } from "react-qrcode-logo";
 
+const QRCodeSize = 250;
 
 const QRCodeCard = ({value}: {value: string}) => (
     <Card className={"bg-white"} style={{color: "hsl(222.2 47.4% 11.2%)"}}>
         <CardHeader>
-            <CardTitle className={"flex items-center gap-1"}>
-                <Image src={"/beanconqueror_logo.png"} alt={"Beanconqueror logo"} height={25} width={25} />
-                QRCode
-            </CardTitle>
+            <CardTitle>QRCode</CardTitle>
             <CardDescription>Scan this with your camera app, not the Beanconqueror app</CardDescription>
         </CardHeader>
         <CardContent className={"flex justify-center"}>
-            <QRCode value={value} />
+            <QRCode
+                value={value}
+                size={QRCodeSize}
+                logoImage={value.length > 40 ? "" : "/beanconqueror_logo.png"}
+                logoHeight={0.2 * QRCodeSize}
+                logoWidth={0.2 * QRCodeSize}
+                removeQrCodeBehindLogo={true}
+            />
         </CardContent>
     </Card>
 )