feat: qrcode with url

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));
+}