Link to main page from claim, qr code clickable

Author: pycanis

apps/web/package.json

@@ -27,6 +27,7 @@
 		"use-local-storage-state": "^19.5.0"
 	},
 	"devDependencies": {
+		"@types/qrcode": "^1.5.5",
 		"@types/react": "^19.0.11",
 		"@types/react-dom": "^19.0.4",
 		"vite-plugin-node-polyfills": "^0.17.0"

apps/web/src/components/Qrcode.tsx

@@ -10,5 +10,9 @@ export const Qrcode = ({ payload }: Props) => {
 		qrcode.toCanvas(document.getElementById("canvas"), payload, { width: 208 });
 	});
 
-	return <canvas id="canvas" className="rounded-lg" />;
+	return (
+		<a href={payload}>
+			<canvas id="canvas" className="rounded-lg" />
+		</a>
+	);
 };

apps/web/src/components/ui/Link.tsx

@@ -5,8 +5,14 @@ type Props = DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HT
 	isExternal?: boolean;
 };
 
-export const Link = ({ children, isExternal = false, ...rest }: Props) => (
-	<a className="flex items-center gap-2 text-orange hover:underline" {...rest}>
+export const Link = ({ children, className, isExternal = false, ...rest }: Props) => (
+	<a
+		className={"inline-flex items-center gap-2 text-orange hover:underline".concat(
+			" ",
+			className || "",
+		)}
+		{...rest}
+	>
 		{children}
 
 		{isExternal && <ExternalLink size={16} />}