neuro_llc/NwaifuMiniApp
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: loader

Browse Source
This commit is contained in:
Sergey Elpashev
2025-06-09 11:59:38 +03:00
parent 7e94b5c44f
commit 3d1898f849
3 changed files with 55 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/actions.ts
View File

@@ -23,7 +23,6 @@ async function getUrlApi(email: string) {
await redis.set("inbound", JSON.stringify(inbound), "EX", 3600);
const users: ClientSettings = JSON.parse(inbound.settings);
const user = users.clients.find((user) => user.email === email);
console.log(user);
if (!user) {
throw new Error("User not found");
}

81
src/app/page.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { Block } from "@/components/Block";
import { Loader } from "@/components/Loader";
import { Page } from "@/components/Page";
import { cn } from "@/utils/cn";
import { useRawInitData } from "@telegram-apps/sdk-react";
@@ -11,6 +12,7 @@ import { getUrl } from "./actions";
export default function Home() {
const [url, setUrl] = useState("");
const [expiryTime, setExpiryTime] = useState(0);
const [isLoading, setIsLoading] = useState(true);
const initData = useRawInitData();
const onCopyClick = async () => {
if (!url.length) return;
@@ -27,54 +29,61 @@ export default function Home() {
const data = await getUrl(initData);
setUrl(data.url);
setExpiryTime(data.expiryTime);
setIsLoading(false);
} catch (e) {
console.error(e);
}
};
fetchData();
}, [initData]);
if (isLoading) return <Loader />;
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-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)]">
<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>
<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>
</div>
<div className="flex flex-col items-center gap-0.5">
<span>Активна до:</span>
<span>
{expiryTime === 0
? "Всегда"
: expiryTime > Date.now()
? new Date(expiryTime).toLocaleString("ru-RU")
: "Не Активна"}
</span>
</div>
</Block>
{url && (
<>
<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>
<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>
</div>
<div className="flex flex-col items-center gap-0.5">
<span>Активна до:</span>
<span>
{expiryTime === 0
? "Всегда"
: expiryTime > Date.now()
? new Date(expiryTime).toLocaleString("ru-RU")
: "Не Активна"}
</span>
</div>
</Block>
</>
)}
</main>
</Page>
);

10
src/components/Loader.tsx Normal file
View File

@@ -0,0 +1,10 @@
const Loader = () => {
return (
<div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-[--tg-theme-bg-color]">
<div className="h-12 w-12 animate-spin rounded-full border-4 border-[--tg-theme-button-bg-color] border-t-transparent" />
<span className="text-semibold">Loading...</span>
</div>
);
};
export { Loader };