feat: qrcode with url

bun.lock

@@ -9,6 +9,7 @@
         "@telegram-apps/sdk-react": "^3.3.0",
         "@telegram-apps/telegram-ui": "^2.1.8",
         "ioredis": "^5.6.1",
+        "lucide-react": "^0.513.0",
         "next": "15.3.3",
         "qrcode": "^1.5.4",
         "qrcode.react": "^4.2.0",
@@ -771,6 +772,8 @@
 
     "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
 
+    "lucide-react": ["lucide-react@0.513.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-CJZKq2g8Y8yN4Aq002GahSXbG2JpFv9kXwyiOAMvUBv7pxeOFHUWKB0mO7MiY4ZVFCV4aNjv2BJFq/z3DgKPQg=="],
+
     "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
 
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],

package.json

@@ -15,6 +15,7 @@
     "@telegram-apps/sdk-react": "^3.3.0",
     "@telegram-apps/telegram-ui": "^2.1.8",
     "ioredis": "^5.6.1",
+    "lucide-react": "^0.513.0",
     "next": "15.3.3",
     "qrcode": "^1.5.4",
     "qrcode.react": "^4.2.0",

src/app/page.tsx

@@ -1,7 +1,10 @@
 "use client";
 import { Block } from "@/components/Block";
 import { Page } from "@/components/Page";
+import { cn } from "@/utils/cn";
 import { useRawInitData } from "@telegram-apps/sdk-react";
+import { ClipboardList } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
 import { useEffect, useState } from "react";
 import { getUrl } from "./actions";
 
@@ -35,13 +38,24 @@ export default function Home() {
       </header>
       <main className="absolute bottom-0 left-0 flex w-full flex-col items-center gap-3 px-2.5 py-3.5 text-[var(--tg-theme-text-color)]">
         <Block name="Ссылка">
-          <div className="size-44 rounded-md bg-white"></div>
-          <button
-            className="h-8 w-48 rounded-md bg-[var(--tg-theme-button-color)] text-[var(--tg-theme-button-text-color)] transition-[scale] hover:scale-[110%] active:scale-[115%]"
+          <div
+            className="relative flex size-52 flex-col items-center justify-center rounded-md bg-white"
             onClick={onCopyClick}
           >
-            {isCopied ? "Скопировано!" : "Копировать"}
-          </button>
+            <div
+              className={cn(
+                "absolute top-0 left-0 flex h-full w-full flex-col items-center justify-center rounded-md bg-[var(--tg-theme-button-color)] opacity-0 transition-opacity",
+                isCopied && "opacity-95"
+              )}
+            >
+              <span className="flex flex-row text-lg font-semibold text-[var(--tg-theme-button-text-color)]">
+                Скопировано
+                <ClipboardList className="text-[var(--tg-theme-button-text-color)]" />
+              </span>
+            </div>
+            <QRCodeSVG value={url} className="size-48" />
+          </div>
+          <span className="text-center text-sm font-semibold">Нажмите, чтобы скопировать!</span>
         </Block>
         <Block name="Подписка">
           <div className="flex flex-col items-center gap-0.5">

src/utils/cn.ts

@@ -0,0 +1,5 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(...inputs));
+}