feat(web): add shareable stack page (#556)

apps/web/src/components/ui/kibo-ui/qr-code/server.tsx

@@ -0,0 +1,42 @@
+import QR from "qrcode";
+import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export type QRCodeProps = HTMLAttributes<HTMLDivElement> & {
+	data: string;
+	foreground: string;
+	background: string;
+	robustness?: "L" | "M" | "Q" | "H";
+};
+
+export const QRCode = async ({
+	data,
+	foreground,
+	background,
+	robustness = "M",
+	className,
+	...props
+}: QRCodeProps) => {
+	const svg = await QR.toString(data, {
+		type: "svg",
+		color: {
+			dark: foreground,
+			light: background,
+		},
+		width: 200,
+		errorCorrectionLevel: robustness,
+	});
+
+	if (!svg) {
+		throw new Error("Failed to generate QR code");
+	}
+
+	return (
+		<div
+			className={cn("size-full", "[&_svg]:size-full", className)}
+			// biome-ignore lint/security/noDangerouslySetInnerHtml: "Required for SVG"
+			dangerouslySetInnerHTML={{ __html: svg }}
+			{...props}
+		/>
+	);
+};