118 lines
3.5 KiB
TypeScript
118 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import { TrendingUpIcon, SparklesIcon, BarChart3Icon } from "lucide-react"
|
|
import { TrendingGamesChart } from "./trending-games-chart"
|
|
import { BestReleasesChart } from "./best-releases-chart"
|
|
import { MostTestedChart } from "./most-tested-chart"
|
|
|
|
interface TrendingGame {
|
|
id: string
|
|
title: string
|
|
capsule_image: string | null
|
|
header_image: string | null
|
|
playability_status: string | null
|
|
benchmark_count: number
|
|
comment_count: number
|
|
upvote_count: number
|
|
activity_score: number
|
|
}
|
|
|
|
interface BestRelease {
|
|
id: string
|
|
title: string
|
|
capsule_image: string | null
|
|
header_image: string | null
|
|
release_date: string | null
|
|
created_at: string | null
|
|
playability_status: string | null
|
|
avg_fps: number | null
|
|
benchmark_count: number
|
|
}
|
|
|
|
interface MostTestedGame {
|
|
id: string
|
|
title: string
|
|
capsule_image: string | null
|
|
header_image: string | null
|
|
playability_status: string | null
|
|
benchmark_count: number
|
|
}
|
|
|
|
interface MostReportedGame {
|
|
id: string
|
|
title: string
|
|
capsule_image: string | null
|
|
header_image: string | null
|
|
report_count: number
|
|
}
|
|
|
|
interface DashboardClientProps {
|
|
trending: TrendingGame[]
|
|
bestNew: BestRelease[]
|
|
mostTested: MostTestedGame[]
|
|
mostReported: MostReportedGame[]
|
|
}
|
|
|
|
export function DashboardClient({
|
|
trending,
|
|
bestNew,
|
|
mostTested,
|
|
mostReported,
|
|
}: DashboardClientProps) {
|
|
return (
|
|
<main className="w-full max-w-6xl mx-auto px-4 py-6 flex flex-col gap-8">
|
|
<header>
|
|
<h1 className="text-2xl md:text-3xl font-bold text-text">
|
|
Community Dashboard
|
|
</h1>
|
|
<p className="text-text/60 mt-1 text-sm md:text-base">
|
|
Real-time insights from the DeckyVault community — trending games, top
|
|
performers, and activity highlights.
|
|
</p>
|
|
</header>
|
|
|
|
{/* Trending Games */}
|
|
<section className="rounded-xl border border-border bg-text/[0.03] p-4 md:p-6 flex flex-col gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<TrendingUpIcon className="h-5 w-5 text-primary" />
|
|
<h2 className="text-lg md:text-xl font-semibold text-text">
|
|
Trending Games (7 days)
|
|
</h2>
|
|
</div>
|
|
<p className="text-text/60 text-sm">
|
|
Top games by community activity: benchmarks, comments, and upvotes.
|
|
</p>
|
|
<TrendingGamesChart games={trending} />
|
|
</section>
|
|
|
|
{/* Best New Releases */}
|
|
<section className="rounded-xl border border-border bg-text/[0.03] p-4 md:p-6 flex flex-col gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<SparklesIcon className="h-5 w-5 text-accent" />
|
|
<h2 className="text-lg md:text-xl font-semibold text-text">
|
|
Best Performing New Releases
|
|
</h2>
|
|
</div>
|
|
<p className="text-text/60 text-sm">
|
|
Newly added games with the highest average FPS (minimum 3 benchmarks).
|
|
</p>
|
|
<BestReleasesChart games={bestNew} />
|
|
</section>
|
|
|
|
{/* Most Tested & Most Reported */}
|
|
<section className="rounded-xl border border-border bg-text/[0.03] p-4 md:p-6 flex flex-col gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<BarChart3Icon className="h-5 w-5 text-info" />
|
|
<h2 className="text-lg md:text-xl font-semibold text-text">
|
|
Most Tested & Most Reported
|
|
</h2>
|
|
</div>
|
|
<p className="text-text/60 text-sm">
|
|
Games with the most benchmarks submitted and the most open reports.
|
|
</p>
|
|
<MostTestedChart mostTested={mostTested} mostReported={mostReported} />
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|