From b3bb15dff730c40655e7b02959b9016d7f25cfdc Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Fri, 6 Jun 2025 15:57:00 +0300
Subject: [PATCH] feat: styles fix

---
 src/app/page.tsx         | 29 ++++++++++++++++++++++-------
 src/components/Block.tsx |  4 ++--
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 648b6eb..4144c23 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,26 +1,41 @@
+"use client";
 import { Block } from "@/components/Block";
 import { Page } from "@/components/Page";
+import { useState } from "react";
 
 export default function Home() {
+  const onCopyClick = async () => {
+    await navigator.clipboard.writeText(window.location.href);
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
+  };
+  const [isCopied, setIsCopied] = useState(false);
   return (
     <Page back={false}>
       <header className="flex h-12 w-full flex-col items-center justify-center bg-[var(--tg-theme-header-bg-color)]">
-        <span className="text-lg font-semibold text-[var(--tg-theme-text-color)]">Nwaifu Proxy</span>
+        <span className="text-xl font-semibold text-[var(--tg-theme-text-color)]">Nwaifu Proxy</span>
       </header>
       <main className="flex h-full w-full flex-col items-center gap-3 px-2.5 py-3.5 text-[var(--tg-theme-text-color)]">
         <Block name="Подписка">
           <div className="flex flex-col items-center gap-0.5">
-            <span className="text-xs">Статус:</span>
-            <span className="text-xs">Активна</span>
+            <span>Статус:</span>
+            <span>Активна</span>
           </div>
           <div className="flex flex-col items-center gap-0.5">
-            <span className="text-xs">Активна до:</span>
-            <span className="text-xs">01.01.2023</span>
+            <span>Активна до:</span>
+            <span>01.01.2023</span>
           </div>
         </Block>
         <Block name="Ссылка">
-          <div className="size-32 rounded-md bg-white"></div>
-          <button className="h-8 w-48 rounded-md bg-[var(--tg-theme-button-color)] text-xs">Копировать</button>
+          <div className="size-44 rounded-md bg-white"></div>
+          <button
+            className="mt-4 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%]"
+            onClick={onCopyClick}
+          >
+            {isCopied ? "Скопировано!" : "Копировать"}
+          </button>
         </Block>
       </main>
     </Page>
diff --git a/src/components/Block.tsx b/src/components/Block.tsx
index 5aca63c..8754a5e 100644
--- a/src/components/Block.tsx
+++ b/src/components/Block.tsx
@@ -4,8 +4,8 @@ type BlockProps = PropsWithChildren<{ name?: string }>;
 
 const Block: React.FC<BlockProps> = ({ children, name = "" }) => {
   return (
-    <div className="flex h-fit w-full flex-col items-center gap-2.5 rounded-lg bg-[var(--tg-theme-section-bg-color)] py-1.5 shadow-md">
-      {name && <span className="text-semibold text-sm">{name}</span>}
+    <div className="flex h-fit w-full flex-col items-center gap-2.5 rounded-lg bg-[var(--tg-theme-section-bg-color)] py-2.5 shadow-md">
+      {name && <span className="text-semibold text-lg">{name}</span>}
       {children}
     </div>
   );