91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
"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";
|
||
import { ClipboardList } from "lucide-react";
|
||
import { QRCodeSVG } from "qrcode.react";
|
||
import { useEffect, useState } from "react";
|
||
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;
|
||
await navigator.clipboard.writeText(url);
|
||
setIsCopied(true);
|
||
setTimeout(() => {
|
||
setIsCopied(false);
|
||
}, 2000);
|
||
};
|
||
const [isCopied, setIsCopied] = useState(false);
|
||
useEffect(() => {
|
||
const fetchData = async () => {
|
||
try {
|
||
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)]">
|
||
{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>
|
||
);
|
||
}
|