feat: styles fix

.dockerignore

@@ -0,0 +1,15 @@
+node_modules
+Dockerfile*
+docker-compose*
+.dockerignore
+.git
+.gitignore
+README.md
+LICENSE
+.vscode
+Makefile
+helm-charts
+.env
+.editorconfig
+.idea
+coverage*

Dockerfile

@@ -0,0 +1,27 @@
+FROM oven/bun:alpine AS base
+WORKDIR /usr/src/app
+
+FROM base AS install
+RUN mkdir -p /temp/dev
+COPY package.json bun.lock /temp/dev/
+RUN cd /temp/dev && bun install --frozen-lockfile
+
+RUN mkdir -p /temp/prod
+COPY package.json bun.lock /temp/prod/
+RUN cd /temp/prod && bun install --frozen-lockfile --production
+
+FROM base AS prerelease 
+COPY --from=install /temp/dev/node_modules node_modules
+COPY . .
+
+ENV NODE_ENV=production
+RUN bun run build
+
+FROM base AS release
+COPY --from=install /temp/prod/node_modules node_modules
+COPY --from=prerelease /usr/src/app/.next .next
+COPY --from=prerelease /usr/src/app/package.json .
+
+USER bun
+EXPOSE 3000/tcp
+ENTRYPOINT ["bun", "run", "start"]

docker-compose.yml

@@ -0,0 +1,5 @@
+services:
+  app:
+    build: .
+    ports:
+      - "3900:3000"

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>

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