46 lines
2.3 KiB
TypeScript
46 lines
2.3 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { Suspense } from "react";
|
|
import { connection } from "next/server";
|
|
|
|
import { AnalyticsDashboard } from "@/components/public/analytics-dashboard";
|
|
import { SiteFooter } from "@/components/public/site-footer";
|
|
import { SiteHeader } from "@/components/public/site-header";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { getCachedPublicAnalytics } from "@/lib/cache/analytics";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "วิเคราะห์ข้อมูล",
|
|
description: "อันดับตัวละคร อาวุธ และอาร์ติแฟกต์ที่ใช้และแนะนำบ่อยที่สุดในไกด์สาธารณะ พร้อมเลือกข้อมูล Stygian",
|
|
};
|
|
|
|
async function AnalyticsContent() {
|
|
await connection();
|
|
return <AnalyticsDashboard data={await getCachedPublicAnalytics()} />;
|
|
}
|
|
|
|
function AnalyticsSkeleton() {
|
|
return <div aria-label="กำลังโหลดข้อมูลวิเคราะห์" className="flex flex-col gap-6">
|
|
<Skeleton className="h-12 w-64" />
|
|
<div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6">
|
|
{Array.from({ length: 6 }, (_, index) => <Skeleton key={index} className="h-28" />)}
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{Array.from({ length: 3 }, (_, index) => <Skeleton key={index} className="h-96" />)}
|
|
</div>
|
|
</div>;
|
|
}
|
|
|
|
export default function AnalyticsPage() {
|
|
return <div className="flex min-h-svh flex-col bg-background">
|
|
<SiteHeader />
|
|
<main className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-8 px-4 py-10 sm:px-6 sm:py-14">
|
|
<header className="flex flex-col gap-3">
|
|
<h1 className="font-heading text-4xl font-semibold">วิเคราะห์ข้อมูล</h1>
|
|
<p className="text-lg text-muted-foreground">ส่องภาพรวมตัวละคร อาวุธ และอาร์ติแฟกต์ที่ใช้และแนะนำบ่อยที่สุดในไกด์ทั้งหมด</p>
|
|
</header>
|
|
<Suspense fallback={<AnalyticsSkeleton />}><AnalyticsContent /></Suspense>
|
|
</main>
|
|
<SiteFooter />
|
|
</div>;
|
|
}
|