682 lines
23 KiB
TypeScript
682 lines
23 KiB
TypeScript
"use client"
|
|
|
|
import { Suspense, useState, useEffect } from "react"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
import { motion, AnimatePresence } from "motion/react"
|
|
import {
|
|
ExternalLinkIcon,
|
|
Gamepad2Icon,
|
|
MessageSquareIcon,
|
|
SettingsIcon,
|
|
TrendingUpIcon,
|
|
DatabaseIcon,
|
|
SparklesIcon,
|
|
} from "lucide-react"
|
|
import { FaSteam } from "react-icons/fa"
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import { useSession } from "@/lib/auth-client"
|
|
import { WindowsIcon, MacIcon, LinuxIcon } from "@/app/components/PlatformIcons"
|
|
import { AntiCheatBadge } from "@/components/anti-cheat-badge"
|
|
import { PlayabilityBadge } from "@/components/playability-badge"
|
|
|
|
interface UnifiedResult {
|
|
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
|
|
isRawPerformer?: boolean
|
|
isPoorPerformance?: boolean
|
|
bestFps?: number | null
|
|
latestVersion?: string | null
|
|
tinyImage?: string | null
|
|
// Badges & review fields
|
|
playabilityStatus?: "great" | "playable" | "needs_tweaks" | "unplayable" | "unknown" | null
|
|
steamReviewScore?: number | null
|
|
steamReviewSentiment?: string | null
|
|
antiCheatRelevant?: boolean
|
|
antiCheatStatus?: string | null
|
|
antiCheatName?: string | null
|
|
}
|
|
|
|
function SearchContent() {
|
|
const searchParams = useSearchParams()
|
|
const router = useRouter()
|
|
const { data: session } = useSession()
|
|
const query = searchParams.get("q") || ""
|
|
|
|
const [results, setResults] = useState<UnifiedResult[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const isValidQuery = query && query.length >= 2
|
|
|
|
// Handle direct navigation / browser back-forward
|
|
useEffect(() => {
|
|
if (!isValidQuery) 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
|
|
}
|
|
}, [isValidQuery, query])
|
|
|
|
function handleClick(result: UnifiedResult) {
|
|
const path = result.appId
|
|
? `/game/${result.appId}?sync=1`
|
|
: `/game/${result.id}?sync=1`
|
|
router.push(path)
|
|
}
|
|
|
|
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>
|
|
|
|
{!isValidQuery && (
|
|
<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>
|
|
)}
|
|
|
|
{isValidQuery && 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>
|
|
)}
|
|
|
|
{isValidQuery && !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>
|
|
)}
|
|
|
|
{isValidQuery && !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>
|
|
)}
|
|
|
|
{isValidQuery && !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>
|
|
)}
|
|
|
|
{session?.user && (
|
|
<div className="mt-6 text-center">
|
|
<p className="text-sm text-text/50">
|
|
Can't find your game?{" "}
|
|
<Link href="/game/add" className="text-primary hover:underline cursor-pointer">
|
|
Add it manually
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function SearchResultCard({
|
|
result,
|
|
onClick,
|
|
index,
|
|
}: {
|
|
result: UnifiedResult
|
|
onClick: (r: UnifiedResult) => void
|
|
index: number
|
|
}) {
|
|
const isLocal = result.kind === "local"
|
|
const counts = result.counts
|
|
const hasData =
|
|
isLocal &&
|
|
counts &&
|
|
(counts.benchmarks > 0 || counts.presets > 0 || counts.comments > 0)
|
|
|
|
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 }}
|
|
>
|
|
<GameCover image={result.image} tinyImage={result.tinyImage} title={result.title} />
|
|
</motion.div>
|
|
|
|
{/* 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">
|
|
<div className="min-w-0 flex items-center gap-2 flex-wrap">
|
|
<h3 className="text-sm sm:text-base font-semibold text-text group-hover:text-primary transition-colors duration-200 truncate">
|
|
{result.title}
|
|
</h3>
|
|
{!isLocal && (
|
|
<span className="text-[10px] px-1.5 py-0.5 rounded bg-text/5 border border-border text-text/35 capitalize shrink-0">
|
|
Steam
|
|
</span>
|
|
)}
|
|
{isLocal && result.source !== "steam" && (
|
|
<span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/20 text-amber-400 capitalize shrink-0">
|
|
{result.source}
|
|
</span>
|
|
)}
|
|
{result.isRawPerformer && (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[10px] font-semibold shrink-0">
|
|
⚡ RAW PERFORMER
|
|
</span>
|
|
)}
|
|
{result.isPoorPerformance && (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-500/10 border border-red-500/20 text-red-400 text-[10px] font-semibold shrink-0">
|
|
⚠ POOR PERFORMANCE
|
|
</span>
|
|
)}
|
|
</div>
|
|
{(result.developer || result.publisher) && (
|
|
<p className="text-[11px] text-text/45 mt-0.5 truncate">
|
|
{result.developer}
|
|
{result.developer && result.publisher ? " · " : ""}
|
|
{result.publisher}
|
|
</p>
|
|
)}
|
|
</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 cursor-pointer"
|
|
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 cursor-pointer"
|
|
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 cursor-pointer"
|
|
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}
|
|
/>
|
|
|
|
{/* Best FPS */}
|
|
<DataField
|
|
label="Best FPS"
|
|
value={result.bestFps != null ? String(Math.round(result.bestFps)) : "—"}
|
|
bar={result.bestFps != null}
|
|
color={result.bestFps != null && result.bestFps >= 60 ? "text-green-400" : undefined}
|
|
/>
|
|
|
|
{/* Version */}
|
|
<DataField
|
|
label="Version"
|
|
value={result.latestVersion ?? "—"}
|
|
/>
|
|
|
|
{/* Playability badge */}
|
|
{result.playabilityStatus && (
|
|
<PlayabilityBadge status={result.playabilityStatus} compact />
|
|
)}
|
|
|
|
{/* Anti-cheat badge */}
|
|
{result.antiCheatRelevant && result.antiCheatStatus === "unsupported" && (
|
|
<AntiCheatBadge
|
|
antiCheatRelevant={true}
|
|
antiCheatStatus={result.antiCheatStatus}
|
|
antiCheatName={result.antiCheatName}
|
|
compact
|
|
/>
|
|
)}
|
|
|
|
{/* Steam review score */}
|
|
{result.steamReviewScore != null && (
|
|
<span className="text-xs text-zinc-400">
|
|
{result.steamReviewScore}% positive
|
|
</span>
|
|
)}
|
|
</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, tinyImage, title }: { image: string | null; tinyImage?: string | null; title: string }) {
|
|
const [src, setSrc] = useState(image)
|
|
const [fallbackStage, setFallbackStage] = useState(0)
|
|
|
|
const handleError = () => {
|
|
if (fallbackStage === 0 && tinyImage) {
|
|
setFallbackStage(1)
|
|
setSrc(tinyImage)
|
|
} else {
|
|
setFallbackStage(2)
|
|
setSrc(null)
|
|
}
|
|
}
|
|
|
|
if (src) {
|
|
return (
|
|
<Image
|
|
src={src}
|
|
alt={title}
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 640px) 80px, 112px"
|
|
onError={handleError}
|
|
/>
|
|
)
|
|
}
|
|
|
|
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) {
|
|
return null
|
|
}
|
|
|
|
// Price is 0 and initial is 0 → legitimately free-to-play
|
|
if (price.initial === 0 && 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">
|
|
Free
|
|
</span>
|
|
)
|
|
}
|
|
|
|
// Price is 0 but initial > 0 → promotional free (free weekend etc.)
|
|
if (price.final === 0 && price.initial > 0) {
|
|
return (
|
|
<span
|
|
className="px-2 py-0.5 rounded-md bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-[11px] font-medium"
|
|
title="Currently free — may be a promotional event"
|
|
>
|
|
Free*
|
|
</span>
|
|
)
|
|
}
|
|
|
|
// Normal paid game
|
|
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>
|
|
)
|
|
}
|