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); await redis.set("inbound", JSON.stringify(inbound), "EX", 3600);
const users: ClientSettings = JSON.parse(inbound.settings); const users: ClientSettings = JSON.parse(inbound.settings);
const user = users.clients.find((user) => user.email === email); const user = users.clients.find((user) => user.email === email);
console.log(user);
if (!user) { if (!user) {
throw new Error("User not found"); throw new Error("User not found");
} }

81
src/app/page.tsx
View File

@@ -1,5 +1,6 @@
"use client"; "use client";
import { Block } from "@/components/Block"; import { Block } from "@/components/Block";
import { Loader } from "@/components/Loader";
import { Page } from "@/components/Page"; import { Page } from "@/components/Page";
import { cn } from "@/utils/cn"; import { cn } from "@/utils/cn";
import { useRawInitData } from "@telegram-apps/sdk-react"; import { useRawInitData } from "@telegram-apps/sdk-react";
@@ -11,6 +12,7 @@ import { getUrl } from "./actions";
export default function Home() { export default function Home() {
const [url, setUrl] = useState(""); const [url, setUrl] = useState("");
const [expiryTime, setExpiryTime] = useState(0); const [expiryTime, setExpiryTime] = useState(0);
const [isLoading, setIsLoading] = useState(true);
const initData = useRawInitData(); const initData = useRawInitData();
const onCopyClick = async () => { const onCopyClick = async () => {
if (!url.length) return; if (!url.length) return;
@@ -27,54 +29,61 @@ export default function Home() {
const data = await getUrl(initData); const data = await getUrl(initData);
setUrl(data.url); setUrl(data.url);
setExpiryTime(data.expiryTime); setExpiryTime(data.expiryTime);
setIsLoading(false);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
}; };
fetchData(); fetchData();
}, [initData]); }, [initData]);
if (isLoading) return <Loader />;
return ( return (
<Page back={false}> <Page back={false}>
<header className="flex h-12 w-full flex-col items-center justify-center bg-[var(--tg-theme-header-bg-color)]"> <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> <span className="text-xl font-semibold text-[var(--tg-theme-text-color)]">Nwaifu Proxy</span>
</header> </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)]"> <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="Ссылка"> {url && (
<div <>
className="relative flex size-52 flex-col items-center justify-center rounded-md bg-white" <Block name="Ссылка">
onClick={onCopyClick} <div
> className="relative flex size-52 flex-col items-center justify-center rounded-md bg-white"
<div onClick={onCopyClick}
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", <div
isCopied && "opacity-95" 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 className="flex flex-row text-lg font-semibold text-[var(--tg-theme-button-text-color)]">
</span> Скопировано
</div> <ClipboardList className="text-[var(--tg-theme-button-text-color)]" />
<QRCodeSVG value={url} className="size-48" /> </span>
</div> </div>
<span className="text-center text-sm font-semibold">Нажмите на QR, чтобы скопировать!</span> <QRCodeSVG value={url} className="size-48" />
</Block> </div>
<Block name="Подписка"> <span className="text-center text-sm font-semibold">Нажмите на QR, чтобы скопировать!</span>
<div className="flex flex-col items-center gap-0.5"> </Block>
<span>Статус:</span> <Block name="Подписка">
<span>{expiryTime > Date.now() || expiryTime === 0 ? "Активна" : "Не Активна"}</span> <div className="flex flex-col items-center gap-0.5">
</div> <span>Статус:</span>
<div className="flex flex-col items-center gap-0.5"> <span>{expiryTime > Date.now() || expiryTime === 0 ? "Активна" : "Не Активна"}</span>
<span>Активна до:</span> </div>
<span> <div className="flex flex-col items-center gap-0.5">
{expiryTime === 0 <span>Активна до:</span>
? "Всегда" <span>
: expiryTime > Date.now() {expiryTime === 0
? new Date(expiryTime).toLocaleString("ru-RU") ? "Всегда"
: "Не Активна"} : expiryTime > Date.now()
</span> ? new Date(expiryTime).toLocaleString("ru-RU")
</div> : "Не Активна"}
</Block> </span>
</div>
</Block>
</>
)}
</main> </main>
</Page> </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 };