From 3953e550b15b1381b59e10077ac2451ad79b0212 Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Wed, 11 Jun 2025 11:54:28 +0300
Subject: [PATCH] feat: multi-subs working

---
 src/app/page.tsx                     | 73 ++++++++++++++++++----------
 src/components/Block.tsx             | 12 +++--
 src/components/Carousel/Carousel.tsx | 31 +++++++-----
 3 files changed, 74 insertions(+), 42 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 09cc6a6..e9c8394 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,8 +7,9 @@ import { cn } from "@/utils/cn";
 import { useRawInitData } from "@telegram-apps/sdk-react";
 import { ChevronLeft, ChevronRight, ClipboardList } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { getUrl } from "./actions";
+import { EmblaCarouselType } from "embla-carousel";
 
 interface ProxySubData {
   url: string;
@@ -22,16 +23,23 @@ export default function Home() {
   const [chosen, setChosen] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   const [notFound, setNotFound] = useState(false);
+  const carouselApi = useRef<EmblaCarouselType | null>(null);
   const initData = useRawInitData();
+  const [isCopied, setIsCopied] = useState<boolean[]>([]);
+
+  useEffect(() => {
+    if (!proxyData.length) return;
+    setIsCopied(Array(proxyData.length).fill(false));
+  }, [proxyData]);
+
   const onCopyClick = async (url: string) => {
     if (!proxyData.length) return;
     await navigator.clipboard.writeText(url);
-    setIsCopied(true);
+    setIsCopied((prev) => prev.map((_, i) => i === chosen));
     setTimeout(() => {
-      setIsCopied(false);
+      setIsCopied((prev) => prev.map(() => false));
     }, 2000);
   };
-  const [isCopied, setIsCopied] = useState(false);
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -66,32 +74,43 @@ export default function Home() {
       <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)]">
         {proxyData.length && (
           <>
-            <Block name="Ссылка">
-              <div className="flex w-full flex-row items-center justify-between">
-                <ChevronLeft onClick={() => setChosen(chosen - 1 < 0 ? proxyData.length - 1 : chosen - 1)} />
-                <Carousel loop>
-                  {proxyData.map((item, index) => (
-                    <div
-                      className="relative flex size-52 flex-[0_0_100%] flex-col items-center justify-center rounded-md bg-white"
-                      onClick={() => onCopyClick(item.url)}
-                      key={index}
-                    >
+            <Block name={proxyData.length > 1 ? `Ссылка ${chosen + 1}/${proxyData.length}` : "Ссылка"}>
+              <div
+                className={cn(
+                  "flex w-full flex-row items-center justify-between px-8",
+                  proxyData.length === 1 && "justify-center"
+                )}
+              >
+                {proxyData.length > 1 && <ChevronLeft onClick={() => carouselApi.current?.scrollPrev()} />}
+                <div className="w-52">
+                  <Carousel
+                    loop
+                    setApi={(api) => (carouselApi.current = api)}
+                    onSelectIndex={(index) => setChosen(index)}
+                  >
+                    {proxyData.map((item, index) => (
                       <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"
-                        )}
+                        className="relative flex size-52 max-w-52 flex-[0_0_100%] flex-col items-center justify-center rounded-md bg-white"
+                        onClick={() => onCopyClick(item.url)}
+                        key={index}
                       >
-                        <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
+                          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[index] && "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={item.url} className="size-48" />
                       </div>
-                      <QRCodeSVG value={item.url} className="size-48" />
-                    </div>
-                  ))}
-                </Carousel>
-                <ChevronRight onClick={() => setChosen(chosen + 1 > proxyData.length - 1 ? 0 : chosen + 1)} />
+                    ))}
+                  </Carousel>
+                </div>
+                {proxyData.length > 1 && <ChevronRight onClick={() => carouselApi.current?.scrollNext()} />}
               </div>
               <span className="text-center text-sm font-semibold">Нажмите на QR, чтобы скопировать!</span>
             </Block>
diff --git a/src/components/Block.tsx b/src/components/Block.tsx
index 8754a5e..cbf41c6 100644
--- a/src/components/Block.tsx
+++ b/src/components/Block.tsx
@@ -1,10 +1,16 @@
+import { cn } from "@/utils/cn";
 import { PropsWithChildren } from "react";
 
-type BlockProps = PropsWithChildren<{ name?: string }>;
+type BlockProps = PropsWithChildren<{ name?: string; className?: string }>;
 
-const Block: React.FC<BlockProps> = ({ children, name = "" }) => {
+const Block: React.FC<BlockProps> = ({ children, name = "", className = "" }) => {
   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-2.5 shadow-md">
+    <div
+      className={cn(
+        "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",
+        className
+      )}
+    >
       {name && <span className="text-semibold text-lg">{name}</span>}
       {children}
     </div>
diff --git a/src/components/Carousel/Carousel.tsx b/src/components/Carousel/Carousel.tsx
index 50df042..43eabb6 100644
--- a/src/components/Carousel/Carousel.tsx
+++ b/src/components/Carousel/Carousel.tsx
@@ -1,24 +1,31 @@
 "use client";
-import { EmblaOptionsType } from "embla-carousel";
+import { EmblaCarouselType, EmblaOptionsType } from "embla-carousel";
 import useEmblaCarousel from "embla-carousel-react";
 import { PropsWithChildren, useEffect, useState } from "react";
 
-type Props = PropsWithChildren & EmblaOptionsType;
+type Props = PropsWithChildren &
+  EmblaOptionsType & {
+    setApi?: (api: EmblaCarouselType) => void;
+    onSelectIndex?: (index: number) => void;
+  };
 
-const Carousel: React.FC<Props> = ({ children, ...options }: Props) => {
+const Carousel: React.FC<Props> = ({ children, setApi, onSelectIndex, ...options }: Props) => {
   const [emblaRef, emblaApi] = useEmblaCarousel(options);
   const [, setSelectedIndex] = useState(0);
   useEffect(() => {
-    const selectHandler = () => {
-      const index = emblaApi?.selectedScrollSnap();
-      setSelectedIndex(index || 0);
-    };
-    emblaApi?.on("select", selectHandler);
-    return () => {
-      emblaApi?.off("select", selectHandler);
-    };
-  }, [emblaApi]);
+    if (!emblaApi) return;
+    if (emblaApi && setApi) setApi(emblaApi);
 
+    const selectHandler = () => {
+      const index = emblaApi.selectedScrollSnap();
+      setSelectedIndex(index);
+      onSelectIndex?.(index);
+    };
+    emblaApi.on("select", selectHandler);
+    return () => {
+      emblaApi.off("select", selectHandler);
+    };
+  }, [emblaApi, setApi, onSelectIndex]);
   return (
     <>
       <div className="overflow-hidden" ref={emblaRef}>