feat: update search page and improve details
This commit is contained in:
@@ -0,0 +1,13 @@
|
||||
import { FaWindows, FaApple, FaLinux } from "react-icons/fa"
|
||||
|
||||
export function WindowsIcon({ className = "h-3.5 w-3.5" }: { className?: string }) {
|
||||
return <FaWindows className={className} aria-label="Windows" />
|
||||
}
|
||||
|
||||
export function MacIcon({ className = "h-3.5 w-3.5" }: { className?: string }) {
|
||||
return <FaApple className={className} aria-label="macOS" />
|
||||
}
|
||||
|
||||
export function LinuxIcon({ className = "h-3.5 w-3.5" }: { className?: string }) {
|
||||
return <FaLinux className={className} aria-label="Linux" />
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useCallback, useState } from "react"
|
||||
import Image from "next/image"
|
||||
import {
|
||||
Gamepad2Icon,
|
||||
@@ -61,20 +61,23 @@ export function GamePageClient({
|
||||
platformSupport: PlatformSupport[]
|
||||
}) {
|
||||
const [activeTab, setActiveTab] = useState<TabKey>("overview")
|
||||
const [imgError, setImgError] = useState(false)
|
||||
const handleImgError = useCallback(() => setImgError(true), [])
|
||||
|
||||
const headerImage = game.headerImage || game.capsuleImage
|
||||
const headerImage = game.capsuleImage || game.headerImage
|
||||
|
||||
return (
|
||||
<section className="w-full flex flex-col">
|
||||
{/* Hero */}
|
||||
<div className="relative w-full h-48 sm:h-64 md:h-80 overflow-hidden">
|
||||
{headerImage ? (
|
||||
{headerImage && !imgError ? (
|
||||
<Image
|
||||
src={headerImage}
|
||||
alt={game.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
onError={handleImgError}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-text/10 flex items-center justify-center">
|
||||
|
||||
@@ -39,23 +39,27 @@ async function createGameStub(steamAppId: number) {
|
||||
const data = (await res.json()) as Record<
|
||||
string,
|
||||
{ success: boolean; data: {
|
||||
type?: string
|
||||
name: string
|
||||
developers?: string[]
|
||||
publishers?: string[]
|
||||
genres?: { description: string }[]
|
||||
header_image?: string
|
||||
capsule_imagev5?: string
|
||||
short_description?: string
|
||||
} }
|
||||
>
|
||||
const entry = data[String(steamAppId)]
|
||||
if (entry?.success && entry.data) {
|
||||
// Reject non-games (DLCs, soundtracks, demos, etc.)
|
||||
if (entry.data.type && entry.data.type !== "game") {
|
||||
notFound()
|
||||
}
|
||||
title = entry.data.name
|
||||
developer = entry.data.developers?.[0] ?? null
|
||||
publisher = entry.data.publishers?.[0] ?? null
|
||||
genres = entry.data.genres?.map((g) => g.description) ?? []
|
||||
headerImage = entry.data.header_image ?? null
|
||||
capsuleImage = entry.data.capsule_imagev5 ?? entry.data.header_image ?? null
|
||||
capsuleImage = `https://cdn.akamai.steamstatic.com/steam/apps/${steamAppId}/library_600x900.jpg`
|
||||
description = entry.data.short_description ?? null
|
||||
}
|
||||
}
|
||||
|
||||
+543
-204
@@ -1,239 +1,578 @@
|
||||
"use client"
|
||||
|
||||
import { Suspense, useEffect, useState } from "react"
|
||||
import { Suspense, useState, useEffect } from "react"
|
||||
import { useRouter, useSearchParams } from "next/navigation"
|
||||
import { ExternalLinkIcon, Gamepad2Icon, MessageSquareIcon, SettingsIcon, TrendingUpIcon } from "lucide-react"
|
||||
import { motion, AnimatePresence } from "motion/react"
|
||||
import {
|
||||
ExternalLinkIcon,
|
||||
Gamepad2Icon,
|
||||
MessageSquareIcon,
|
||||
MonitorIcon,
|
||||
SettingsIcon,
|
||||
TrendingUpIcon,
|
||||
DatabaseIcon,
|
||||
SparklesIcon,
|
||||
} from "lucide-react"
|
||||
import { FaSteam } from "react-icons/fa"
|
||||
import Image from "next/image"
|
||||
import { WindowsIcon, MacIcon, LinuxIcon } from "@/app/components/PlatformIcons"
|
||||
|
||||
interface UnifiedResult {
|
||||
kind: "local" | "steam"
|
||||
id?: string
|
||||
appId: number | null
|
||||
title: string
|
||||
image: string | null
|
||||
developer: string | null
|
||||
publisher: string | null
|
||||
source: string
|
||||
counts: { benchmarks: number; presets: number; comments: number } | null
|
||||
kind: "local" | "steam"
|
||||
id?: string
|
||||
appId: number | null
|
||||
title: string
|
||||
image: string | null
|
||||
developer: string | null
|
||||
publisher: string | null
|
||||
description: string | null
|
||||
genres: string[] | null
|
||||
source: string
|
||||
counts: { benchmarks: number; presets: number; comments: number } | null
|
||||
platformSupport: {
|
||||
isSupported: boolean
|
||||
protonStatus: string
|
||||
antiCheatRelevant: boolean
|
||||
antiCheatName: string | null
|
||||
antiCheatStatus: string
|
||||
} | null
|
||||
metascore?: string | null
|
||||
price?: { currency: string; initial: number; final: number } | null
|
||||
platforms?: { windows: boolean; mac: boolean; linux: boolean } | null
|
||||
controllerSupport?: string | null
|
||||
}
|
||||
|
||||
function SearchContent() {
|
||||
const searchParams = useSearchParams()
|
||||
const router = useRouter()
|
||||
const query = searchParams.get("q") || ""
|
||||
const searchParams = useSearchParams()
|
||||
const router = useRouter()
|
||||
const query = searchParams.get("q") || ""
|
||||
|
||||
const [results, setResults] = useState<UnifiedResult[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!query) {
|
||||
setResults([])
|
||||
return
|
||||
}
|
||||
|
||||
let cancelled = false
|
||||
|
||||
async function fetchResults() {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/search/unified?q=${encodeURIComponent(query)}`,
|
||||
)
|
||||
if (!res.ok) throw new Error(await res.text())
|
||||
const data = await res.json()
|
||||
if (!cancelled) setResults(data.results || [])
|
||||
} catch (err) {
|
||||
if (!cancelled) {
|
||||
setError("Failed to fetch search results")
|
||||
console.error(err)
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchResults()
|
||||
return () => { cancelled = true }
|
||||
}, [query])
|
||||
|
||||
function handleClick(result: UnifiedResult) {
|
||||
const path = result.appId
|
||||
? `/game/${result.appId}`
|
||||
: `/game/${result.id}`
|
||||
router.push(path)
|
||||
const [results, setResults] = useState<UnifiedResult[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
// Handle direct navigation / browser back-forward
|
||||
useEffect(() => {
|
||||
if (!query || query.length < 2) {
|
||||
setResults([])
|
||||
setError(null)
|
||||
return
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="w-full min-h-[calc(100vh-3.6rem)] flex flex-col items-center p-4 md:px-[10svw]">
|
||||
<div className="w-full max-w-7xl">
|
||||
<h1 className="text-2xl font-light mb-2">
|
||||
{query ? `results for "${query}"` : "search using game name or appid"}
|
||||
</h1>
|
||||
<p className="text-text/60 text-sm mb-8">
|
||||
{query
|
||||
? `${results.length} result${results.length !== 1 ? "s" : ""} found`
|
||||
: "Enter a game name or AppID to find benchmarks, settings, and reviews."}
|
||||
</p>
|
||||
let cancelled = false
|
||||
|
||||
{!query && (
|
||||
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||
<Gamepad2Icon className="h-12 w-12 text-text/20" />
|
||||
<p className="text-text/40 text-sm">
|
||||
Start typing to search for games
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
async function fetchResults() {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
{query && loading && (
|
||||
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||
<div className="animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full" />
|
||||
<p className="text-text/60 text-sm">
|
||||
Searching for "{query}"...
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/search/unified?q=${encodeURIComponent(query)}`,
|
||||
)
|
||||
if (!res.ok) throw new Error(await res.text())
|
||||
const data = await res.json()
|
||||
if (!cancelled) setResults(data.results || [])
|
||||
} catch (err) {
|
||||
if (!cancelled) {
|
||||
setError("Failed to fetch search results")
|
||||
console.error(err)
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
{query && !loading && error && (
|
||||
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||
<p className="text-red-400 text-sm">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
fetchResults()
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [query])
|
||||
|
||||
{query && !loading && !error && results.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||
<Gamepad2Icon className="h-12 w-12 text-text/20" />
|
||||
<p className="text-text/40 text-sm">
|
||||
No results found for "{query}"
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
function handleClick(result: UnifiedResult) {
|
||||
const path = result.appId
|
||||
? `/game/${result.appId}`
|
||||
: `/game/${result.id}`
|
||||
router.push(path)
|
||||
}
|
||||
|
||||
{query && !loading && !error && results.length > 0 && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{results.map((result, idx) => (
|
||||
<SearchResultCard
|
||||
key={result.kind === "local" ? result.id : `steam-${result.appId}-${idx}`}
|
||||
result={result}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
return (
|
||||
<section className="w-full min-h-[calc(100vh-3.6rem)] flex flex-col items-center p-4 md:px-[10svw]">
|
||||
<div className="w-full max-w-7xl">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="text-2xl font-light mb-2"
|
||||
>
|
||||
{query ? `Results for "${query}"` : "Search using game name or AppID"}
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1, transition: { delay: 0.1 } }}
|
||||
className="text-text/60 text-sm mb-8"
|
||||
>
|
||||
{query
|
||||
? `${results.length} result${results.length !== 1 ? "s" : ""} found`
|
||||
: "Enter a game name or AppID to find benchmarks, settings, and reviews."}
|
||||
</motion.p>
|
||||
|
||||
{!query && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="flex flex-col items-center justify-center py-20 gap-4"
|
||||
>
|
||||
<Gamepad2Icon className="h-12 w-12 text-text/20" />
|
||||
<p className="text-text/40 text-sm">
|
||||
Start typing to search for games
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{query && loading && (
|
||||
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ repeat: Infinity, duration: 1, ease: "linear" }}
|
||||
className="h-8 w-8 border-2 border-primary border-t-transparent rounded-full"
|
||||
/>
|
||||
<p className="text-text/60 text-sm">
|
||||
Searching for "{query}"...
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{query && !loading && error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="flex flex-col items-center justify-center py-20 gap-4"
|
||||
>
|
||||
<p className="text-red-400 text-sm">{error}</p>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{query && !loading && !error && results.length === 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="flex flex-col items-center justify-center py-20 gap-4"
|
||||
>
|
||||
<Gamepad2Icon className="h-12 w-12 text-text/20" />
|
||||
<p className="text-text/40 text-sm">
|
||||
No results found for "{query}"
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{query && !loading && !error && results.length > 0 && (
|
||||
<motion.div
|
||||
className="flex flex-col gap-3"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={{
|
||||
hidden: {},
|
||||
visible: { transition: { staggerChildren: 0.04 } },
|
||||
}}
|
||||
>
|
||||
<AnimatePresence mode="popLayout">
|
||||
{results.map((result, idx) => (
|
||||
<SearchResultCard
|
||||
key={
|
||||
result.kind === "local"
|
||||
? result.id
|
||||
: `steam-${result.appId}-${idx}`
|
||||
}
|
||||
result={result}
|
||||
onClick={handleClick}
|
||||
index={idx}
|
||||
/>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function SearchResultCard({
|
||||
result,
|
||||
onClick,
|
||||
result,
|
||||
onClick,
|
||||
index,
|
||||
}: {
|
||||
result: UnifiedResult
|
||||
onClick: (r: UnifiedResult) => void
|
||||
result: UnifiedResult
|
||||
onClick: (r: UnifiedResult) => void
|
||||
index: number
|
||||
}) {
|
||||
const isLocal = result.kind === "local"
|
||||
const hasData = isLocal && result.counts && (
|
||||
result.counts.benchmarks > 0 ||
|
||||
result.counts.presets > 0 ||
|
||||
result.counts.comments > 0
|
||||
)
|
||||
const hasDeveloperInfo = result.developer || result.publisher
|
||||
const isLocal = result.kind === "local"
|
||||
const counts = result.counts
|
||||
const hasData =
|
||||
isLocal &&
|
||||
counts &&
|
||||
(counts.benchmarks > 0 || counts.presets > 0 || counts.comments > 0)
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group flex flex-col gap-3 p-3 rounded-lg border border-border bg-text/5 hover:border-primary/50 transition-all cursor-pointer"
|
||||
onClick={() => onClick(result)}
|
||||
return (
|
||||
<motion.article
|
||||
layout
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
}}
|
||||
transition={{ duration: 0.3, delay: index * 0.02 }}
|
||||
whileHover={{ scale: 1.005 }}
|
||||
whileTap={{ scale: 0.995 }}
|
||||
className="group relative bg-text/[0.03] border border-border rounded-xl p-4 sm:p-5 transition-colors duration-200 hover:border-text/30 hover:bg-text/[0.06] cursor-pointer focus-within:outline-none focus-within:ring-2 focus-within:ring-text/20 focus-within:ring-offset-2 focus-within:ring-offset-background"
|
||||
title={isLocal
|
||||
? "Click to view game details, benchmarks, and settings"
|
||||
: "Click to add this game to DeckyVault and view its page"
|
||||
}
|
||||
>
|
||||
{/* Full-card click target */}
|
||||
<div
|
||||
className="absolute inset-0 after:content-[''] after:absolute after:inset-0"
|
||||
onClick={() => onClick(result)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-4 sm:gap-5">
|
||||
{/* Cover */}
|
||||
<motion.div
|
||||
className="relative w-20 sm:w-24 md:w-28 shrink-0 aspect-[2/3] rounded-lg overflow-hidden bg-text/10 shadow-sm"
|
||||
whileHover={{ scale: 1.03 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="relative w-full aspect-[460/215] rounded-md overflow-hidden bg-text/10">
|
||||
{result.image ? (
|
||||
<Image
|
||||
src={result.image}
|
||||
alt={result.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<Gamepad2Icon className="h-8 w-8 text-text/20" />
|
||||
</div>
|
||||
)}
|
||||
{/* Source badge */}
|
||||
<div className="absolute top-2 right-2 flex gap-1">
|
||||
{isLocal && (
|
||||
<span className="text-[10px] font-medium uppercase tracking-wider bg-primary/90 text-white px-1.5 py-0.5 rounded">
|
||||
In Database
|
||||
</span>
|
||||
)}
|
||||
{!isLocal && result.appId && (
|
||||
<a
|
||||
href={`https://store.steampowered.com/app/${result.appId}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[10px] font-medium uppercase tracking-wider bg-text/80 text-background px-1.5 py-0.5 rounded flex items-center gap-1"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
Steam
|
||||
<ExternalLinkIcon className="h-2.5 w-2.5" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<GameCover image={result.image} title={result.title} />
|
||||
</motion.div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex flex-col gap-1 min-w-0">
|
||||
<p className="font-medium text-sm truncate leading-tight">
|
||||
{result.title}
|
||||
{/* Main Content */}
|
||||
<div className="flex flex-col min-w-0 flex-1">
|
||||
{/* Row 1: Title + metascore/price row */}
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-sm sm:text-base font-semibold text-text group-hover:text-primary transition-colors duration-200 truncate">
|
||||
{result.title}
|
||||
</h3>
|
||||
{(result.developer || result.publisher) && (
|
||||
<p className="text-[11px] text-text/45 mt-0.5 truncate">
|
||||
{result.developer}
|
||||
{result.developer && result.publisher ? " · " : ""}
|
||||
{result.publisher}
|
||||
</p>
|
||||
{hasDeveloperInfo ? (
|
||||
<p className="text-xs text-text/50 truncate">
|
||||
{result.developer || result.publisher}
|
||||
</p>
|
||||
) : !isLocal && result.appId ? (
|
||||
<p className="text-xs text-text/40">
|
||||
AppID: {result.appId}
|
||||
</p>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats (local only) */}
|
||||
{isLocal && result.counts && (
|
||||
<div className="flex flex-row gap-3 text-[11px] text-text/50">
|
||||
{result.counts.benchmarks > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<TrendingUpIcon className="h-3 w-3" />
|
||||
{result.counts.benchmarks}
|
||||
</span>
|
||||
)}
|
||||
{result.counts.presets > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<SettingsIcon className="h-3 w-3" />
|
||||
{result.counts.presets}
|
||||
</span>
|
||||
)}
|
||||
{result.counts.comments > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<MessageSquareIcon className="h-3 w-3" />
|
||||
{result.counts.comments}
|
||||
</span>
|
||||
)}
|
||||
{!hasData && (
|
||||
<span className="text-text/30 italic">No data yet</span>
|
||||
)}
|
||||
</div>
|
||||
{/* Metascore + Price row */}
|
||||
<div className="hidden sm:flex items-center gap-2 shrink-0">
|
||||
{result.metascore ? (
|
||||
<span
|
||||
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-green-500/10 border border-green-500/20 text-green-400 text-[11px] font-semibold"
|
||||
title={`Metascore: ${result.metascore}/100`}
|
||||
>
|
||||
<TrendingUpIcon className="h-3 w-3" />
|
||||
{result.metascore}
|
||||
</span>
|
||||
) : null}
|
||||
<PriceTag price={result.price} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2: Description */}
|
||||
{result.description && (
|
||||
<p className="text-[11px] text-text/40 line-clamp-2 leading-relaxed mt-1.5">
|
||||
{result.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Row 3: Genre tags + Platform icons + Controller */}
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 mt-2">
|
||||
{result.genres && result.genres.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{result.genres.slice(0, 3).map((genre) => (
|
||||
<span
|
||||
key={genre}
|
||||
className="text-[10px] px-1.5 py-0.5 rounded bg-text/5 border border-border text-text/35"
|
||||
>
|
||||
{genre}
|
||||
</span>
|
||||
))}
|
||||
{result.genres.length > 3 && (
|
||||
<span className="text-[10px] text-text/25 self-center">
|
||||
+{result.genres.length - 3}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Platform icons — always show all 3, color if present */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span title="Windows">
|
||||
<WindowsIcon
|
||||
className={`h-3.5 w-3.5 ${result.platforms?.windows ? "text-blue-400" : "text-text/20"}`}
|
||||
/>
|
||||
</span>
|
||||
<span title="macOS">
|
||||
<MacIcon
|
||||
className={`h-3.5 w-3.5 ${result.platforms?.mac ? "text-text/60" : "text-text/20"}`}
|
||||
/>
|
||||
</span>
|
||||
<span title="Linux">
|
||||
<LinuxIcon
|
||||
className={`h-3.5 w-3.5 ${result.platforms?.linux ? "text-yellow-500" : "text-text/20"}`}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{result.controllerSupport && (
|
||||
<span
|
||||
className="text-[10px] text-text/25 flex items-center gap-1"
|
||||
title="Full controller support"
|
||||
>
|
||||
<Gamepad2Icon className="h-3 w-3" />
|
||||
Controller
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Row 4: Stats row */}
|
||||
<div className="flex flex-wrap items-center gap-3 mt-2.5">
|
||||
{hasData ? (
|
||||
<>
|
||||
{counts!.benchmarks > 0 && (
|
||||
<StatBadge
|
||||
icon={TrendingUpIcon}
|
||||
count={counts!.benchmarks}
|
||||
label="Benchmarks"
|
||||
/>
|
||||
)}
|
||||
{counts!.presets > 0 && (
|
||||
<StatBadge
|
||||
icon={SettingsIcon}
|
||||
count={counts!.presets}
|
||||
label="Presets"
|
||||
/>
|
||||
)}
|
||||
{counts!.comments > 0 && (
|
||||
<StatBadge
|
||||
icon={MessageSquareIcon}
|
||||
count={counts!.comments}
|
||||
label="Comments"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : isLocal ? (
|
||||
<span className="text-[11px] text-text/30 italic">
|
||||
No data yet — be the first to contribute
|
||||
</span>
|
||||
) : (
|
||||
<div className="flex flex-col items-start gap-1.5 w-full sm:w-auto">
|
||||
<a
|
||||
href={`https://store.steampowered.com/app/${result.appId}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="relative z-10 inline-flex items-center justify-center gap-1.5 px-2.5 py-1 rounded-md bg-[#1b2838] border border-[#2a475e] text-[#c6d4df] text-[11px] hover:bg-[#2a475e] transition-colors w-full"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
title="Open store page on Steam"
|
||||
>
|
||||
<FaSteam className="h-3 w-3" />
|
||||
Steam
|
||||
<ExternalLinkIcon className="h-2.5 w-2.5 opacity-60" />
|
||||
</a>
|
||||
<a
|
||||
href={`https://www.protondb.com/app/${result.appId}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="relative z-10 inline-flex items-center justify-center gap-1.5 px-2.5 py-1 rounded-md bg-purple-500/10 border border-purple-500/20 text-purple-400 text-[11px] hover:bg-purple-500/20 transition-colors w-full"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
title="View Proton compatibility on ProtonDB"
|
||||
>
|
||||
<SparklesIcon className="h-3 w-3" />
|
||||
ProtonDB
|
||||
<ExternalLinkIcon className="h-2.5 w-2.5 opacity-60" />
|
||||
</a>
|
||||
<a
|
||||
href={`https://steamdb.info/app/${result.appId}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="relative z-10 inline-flex items-center justify-center gap-1.5 px-2.5 py-1 rounded-md bg-blue-500/10 border border-blue-500/20 text-blue-400 text-[11px] hover:bg-blue-500/20 transition-colors w-full"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
title="View app details on SteamDB"
|
||||
>
|
||||
<DatabaseIcon className="h-3 w-3" />
|
||||
SteamDB
|
||||
<ExternalLinkIcon className="h-2.5 w-2.5 opacity-60" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Row 5: Anti-cheat info */}
|
||||
{result.platformSupport?.antiCheatRelevant && (
|
||||
<div className="mt-2">
|
||||
<span className="text-[10px] text-text/30">
|
||||
Anti-cheat: {result.platformSupport.antiCheatName || "Unknown"}
|
||||
<span className="text-text/20">
|
||||
{" "}— {result.platformSupport.antiCheatStatus}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Panel — Desktop Only */}
|
||||
<div className="hidden md:flex flex-col items-end justify-center gap-2.5 shrink-0 min-w-[120px]">
|
||||
{/* Deck Status */}
|
||||
<DataField
|
||||
label="Deck"
|
||||
value={result.platformSupport ? protonLabel(result.platformSupport.protonStatus) : "—"}
|
||||
color={result.platformSupport ? protonColor(result.platformSupport.protonStatus) : undefined}
|
||||
/>
|
||||
|
||||
{/* Avg FPS */}
|
||||
<DataField label="Avg. FPS" value="—" bar />
|
||||
|
||||
{/* Version */}
|
||||
<DataField label="Version" value="—" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.article>
|
||||
)
|
||||
}
|
||||
|
||||
function DataField({
|
||||
label,
|
||||
value,
|
||||
bar,
|
||||
color,
|
||||
}: {
|
||||
label: string
|
||||
value: string
|
||||
bar?: boolean
|
||||
color?: string
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col items-end gap-1 w-full">
|
||||
<span className="text-[10px] text-text/30 uppercase tracking-wider">
|
||||
{label}
|
||||
</span>
|
||||
<div className="flex items-center gap-2 w-full justify-end">
|
||||
{bar && (
|
||||
<div className="w-14 h-1.5 rounded-full bg-text/5 overflow-hidden">
|
||||
<div className="h-full w-0 rounded-full bg-primary/40" />
|
||||
</div>
|
||||
)}
|
||||
<span className={`text-xs tabular-nums ${color || "text-text/25"}`}>
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function protonLabel(status: string): string {
|
||||
const map: Record<string, string> = {
|
||||
native: "Native",
|
||||
proton: "Proton",
|
||||
unsupported: "Unsupported",
|
||||
unknown: "Unknown",
|
||||
}
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
function protonColor(status: string): string {
|
||||
const map: Record<string, string> = {
|
||||
native: "text-green-400",
|
||||
proton: "text-blue-400",
|
||||
unsupported: "text-red-400",
|
||||
unknown: "text-text/25",
|
||||
}
|
||||
return map[status] || "text-text/25"
|
||||
}
|
||||
|
||||
function GameCover({ image, title }: { image: string | null; title: string }) {
|
||||
const [error, setError] = useState(false)
|
||||
|
||||
if (image && !error) {
|
||||
return (
|
||||
<Image
|
||||
src={image}
|
||||
alt={title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 640px) 80px, 112px"
|
||||
onError={() => setError(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<Gamepad2Icon className="h-6 w-6 text-text/20" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PriceTag({
|
||||
price,
|
||||
}: {
|
||||
price?: { currency: string; initial: number; final: number } | null
|
||||
}) {
|
||||
if (!price || price.final === 0) {
|
||||
return (
|
||||
<span
|
||||
className="px-2 py-0.5 rounded-md bg-green-500/10 border border-green-500/20 text-green-400 text-[11px] font-medium"
|
||||
title="Free to play"
|
||||
>
|
||||
Free
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const isDiscounted = price.final < price.initial
|
||||
const fmt = new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: price.currency,
|
||||
})
|
||||
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
{isDiscounted && (
|
||||
<span className="text-[10px] text-text/30 line-through">
|
||||
{fmt.format(price.initial / 100)}
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
className="px-2 py-0.5 rounded-md bg-text/5 border border-border text-text/60 text-[11px] font-medium"
|
||||
title={isDiscounted ? "Discounted price" : "Current price"}
|
||||
>
|
||||
{fmt.format(price.final / 100)}
|
||||
</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function StatBadge({
|
||||
icon: Icon,
|
||||
count,
|
||||
label,
|
||||
}: {
|
||||
icon: React.ElementType
|
||||
count: number
|
||||
label: string
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center gap-1 text-[11px] text-text/50"
|
||||
title={`${count} ${label.toLowerCase()}`}
|
||||
>
|
||||
<Icon className="h-3 w-3 text-text/30" />
|
||||
<span className="tabular-nums">{count}</span>
|
||||
<span className="hidden sm:inline">{label}</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export default function SearchPage() {
|
||||
return (
|
||||
<Suspense>
|
||||
<SearchContent />
|
||||
</Suspense>
|
||||
)
|
||||
return (
|
||||
<Suspense>
|
||||
<SearchContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user