feat: started multi-subs

src/app/page.tsx

@@ -1,22 +1,30 @@
 "use client";
 import { Block } from "@/components/Block";
+import { Carousel } from "@/components/Carousel/Carousel";
 import { Loader } from "@/components/Loader";
 import { Page } from "@/components/Page";
 import { cn } from "@/utils/cn";
 import { useRawInitData } from "@telegram-apps/sdk-react";
-import { ClipboardList } from "lucide-react";
+import { ChevronLeft, ChevronRight, ClipboardList } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 import { useEffect, useState } from "react";
 import { getUrl } from "./actions";
 
+interface ProxySubData {
+  url: string;
+  expiryTime: number;
+}
+
+type ProxySubArray = ProxySubData[];
+
 export default function Home() {
-  const [url, setUrl] = useState("");
-  const [expiryTime, setExpiryTime] = useState(0);
+  const [proxyData, setProxyData] = useState<ProxySubArray>([]);
+  const [chosen, setChosen] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   const [notFound, setNotFound] = useState(false);
   const initData = useRawInitData();
-  const onCopyClick = async () => {
-    if (!url.length) return;
+  const onCopyClick = async (url: string) => {
+    if (!proxyData.length) return;
     await navigator.clipboard.writeText(url);
     setIsCopied(true);
     setTimeout(() => {
@@ -28,8 +36,7 @@ export default function Home() {
     const fetchData = async () => {
       try {
         const data = await getUrl(initData);
-        setUrl(data.url);
-        setExpiryTime(data.expiryTime);
+        setProxyData(data);
         setIsLoading(false);
       } catch (e) {
         console.error(e);
@@ -57,40 +64,53 @@ export default function Home() {
         <span className="text-xl font-semibold text-[var(--tg-theme-text-color)]">Nwaifu Proxy</span>
       </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)]">
-        {url && (
+        {proxyData.length && (
           <>
             <Block name="Ссылка">
-              <div
-                className="relative flex size-52 flex-col items-center justify-center rounded-md bg-white"
-                onClick={onCopyClick}
-              >
-                <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 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}
+                    >
+                      <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={item.url} className="size-48" />
+                    </div>
+                  ))}
+                </Carousel>
+                <ChevronRight onClick={() => setChosen(chosen + 1 > proxyData.length - 1 ? 0 : chosen + 1)} />
               </div>
               <span className="text-center text-sm font-semibold">Нажмите на QR, чтобы скопировать!</span>
             </Block>
             <Block name="Подписка">
               <div className="flex flex-col items-center gap-0.5">
                 <span>Статус:</span>
-                <span>{expiryTime > Date.now() || expiryTime === 0 ? "Активна" : "Не Активна"}</span>
+                <span>
+                  {proxyData[chosen].expiryTime > Date.now() || proxyData[chosen].expiryTime === 0
+                    ? "Активна"
+                    : "Не Активна"}
+                </span>
               </div>
               <div className="flex flex-col items-center gap-0.5">
                 <span>Активна до:</span>
                 <span>
-                  {expiryTime === 0
+                  {proxyData[chosen].expiryTime === 0
                     ? "Всегда"
-                    : expiryTime > Date.now()
-                      ? new Date(expiryTime).toLocaleString("ru-RU")
+                    : proxyData[chosen].expiryTime > Date.now()
+                      ? new Date(proxyData[chosen].expiryTime).toLocaleString("ru-RU")
                       : "Не Активна"}
                 </span>
               </div>