"use client"; import { useEffect, useState } from "react"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { Progress } from "@/components/ui/progress"; import { Clock, Link, BarChart2, AlertTriangle, ExternalLink, } from "lucide-react"; import { Skeleton } from "@/components/ui/skeleton"; interface UrlData { longUrl: string; expired: boolean; stats: { visits: number; expiresAt: string | null; }; } export default function RedirectPage({ params, }: { params: { shortCode: string }; }) { const [data, setData] = useState(null); const [error, setError] = useState(null); const [progress, setProgress] = useState(0); const [isLoading, setIsLoading] = useState(true); useEffect(() => { const fetchData = async () => { try { const response = await fetch(`/api/url/${params.shortCode}`); const json = await response.json(); if (!response.ok) { setError(json.error || "Failed to fetch URL data"); return; } setData(json); } catch (err) { setError("Failed to load URL data"); console.error("Error fetching data:", err); } finally { setIsLoading(false); } }; fetchData(); }, [params.shortCode]); useEffect(() => { if (data?.longUrl) { const interval = setInterval(() => { setProgress((prev) => { if (prev >= 100) { clearInterval(interval); window.location.href = data.longUrl; return 100; } return prev + 2; }); }, 100); return () => clearInterval(interval); } }, [data?.longUrl]); if (isLoading) { return ; } if (error || !data) { return (
{error || "URL Not Found"}

请求的短链接不存在或已过期。

); } return (
您即将被传送... 您将在 {Math.ceil((100 - progress) / 20)} 秒后被传送!

少女祈祷中...

我们的位置

{`${process.env.NEXT_PUBLIC_BASE_URL}/s/${params.shortCode}`}

访问量

{data.stats.visits}

目的地

{data.longUrl}

过期时间

{data.stats.expiresAt ? new Date(data.stats.expiresAt).toLocaleString() : "Never"}

警告

本链接将会为您跳转一个外部网站,我们不对这些外部网站的内容负责,请谨慎访问。

推广

雨云,高性价比的云服务商 立即购买!

违规举报:{" "} {process.env.NEXT_PUBLIC_SUPPORT_EMAIL}

); } function LoadingSkeleton() { return (
{[...Array(4)].map((_, i) => (
))}
); }