feat: initial landing and search pages

2026-04-25 21:01:00 +08:00
parent 327dce2b19
commit 592b0c7b87
6 changed files with 381 additions and 35 deletions
@@ -0,0 +1,52 @@
+"use client"
+
+import { Suspense } from "react"
+import { useSearchParams } from "next/navigation"
+import { motion } from "motion/react"
+import { Gamepad2Icon } from "lucide-react"
+
+function SearchContent() {
+    const searchParams = useSearchParams()
+    const query = searchParams.get("q") || ""
+
+    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-4xl mt-8">
+                <h1 className="text-2xl font-bold mb-2">
+                    {query ? `Search results for "${query}"` : "Search"}
+                </h1>
+                <p className="text-text/60 text-sm mb-8">
+                    {query
+                        ? "Showing results from the database..."
+                        : "Enter a game name or AppID to find benchmarks, settings, and reviews."}
+                </p>
+
+                {!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>
+                )}
+
+                {query && (
+                    <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 &quot;{query}&quot;...
+                        </p>
+                    </div>
+                )}
+            </div>
+        </section>
+    )
+}
+
+export default function SearchPage() {
+    return (
+        <Suspense>
+            <SearchContent />
+        </Suspense>
+    )
+}