feat: login/register pages, login dialog, homepage with game categories and player/shop cards

Use standardSchemaResolver instead of zodResolver to work around
Zod v4 type incompatibility with @hookform/resolvers.
This commit is contained in:
zetaloop
2026-02-20 14:17:26 +08:00
parent f7c76db00f
commit e2b47681a3
7 changed files with 392 additions and 21 deletions
+145 -14
View File
@@ -1,22 +1,153 @@
import { ArrowRight, Search, ShoppingBag, Star } from "lucide-react"
import Link from "next/link"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { mockGames, mockPlayers, mockShops } from "@/lib/mock-data"
export default function HomePage() {
return (
<div className="container mx-auto py-8 px-4">
<h1 className="text-3xl font-bold"></h1>
<p className="mt-2 text-lg text-muted-foreground"></p>
<div className="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div className="rounded-lg border p-6">
<h2 className="font-semibold"></h2>
<p className="mt-1 text-sm text-muted-foreground"></p>
<div className="container mx-auto py-8 px-4 space-y-12">
<section className="text-center space-y-4 py-8">
<h1 className="text-4xl font-bold tracking-tight"></h1>
<p className="text-lg text-muted-foreground max-w-xl mx-auto">
</p>
<div className="flex justify-center gap-2 pt-2">
<Button size="lg" asChild>
<Link href="/search">
<Search className="mr-2 h-4 w-4" />
</Link>
</Button>
<Button size="lg" variant="outline" asChild>
<Link href="/community"></Link>
</Button>
</div>
<div className="rounded-lg border p-6">
<h2 className="font-semibold"></h2>
<p className="mt-1 text-sm text-muted-foreground"></p>
</section>
<section>
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold"></h2>
<Button variant="ghost" size="sm" asChild>
<Link href="/search">
<ArrowRight className="ml-1 h-4 w-4" />
</Link>
</Button>
</div>
<div className="rounded-lg border p-6">
<h2 className="font-semibold"></h2>
<p className="mt-1 text-sm text-muted-foreground"></p>
<div className="grid grid-cols-4 md:grid-cols-8 gap-3">
{mockGames.map((game) => (
<Link
key={game.id}
href={`/search?game=${encodeURIComponent(game.name)}`}
className="flex flex-col items-center gap-2 rounded-lg border p-3 hover:bg-accent/50 transition-colors"
>
<span className="text-2xl">{game.icon}</span>
<span className="text-xs font-medium text-center">{game.name}</span>
</Link>
))}
</div>
</div>
</section>
<section>
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold"></h2>
<Button variant="ghost" size="sm" asChild>
<Link href="/search">
<ArrowRight className="ml-1 h-4 w-4" />
</Link>
</Button>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{mockPlayers.map((player) => (
<Card key={player.id} className="hover:shadow-md transition-shadow">
<CardHeader className="flex flex-row items-center gap-3 space-y-0 pb-3">
<Avatar className="h-12 w-12">
<AvatarImage src={player.user.avatar} />
<AvatarFallback>{player.user.nickname[0]}</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<CardTitle className="text-base">{player.user.nickname}</CardTitle>
<div className="flex items-center gap-2 mt-1">
<div className="flex items-center text-sm">
<Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400 mr-0.5" />
{player.rating}
</div>
<span className="text-xs text-muted-foreground">{player.totalOrders} </span>
<Badge
variant={player.status === "available" ? "default" : "secondary"}
className="text-[10px] px-1.5 py-0"
>
{player.status === "available"
? "可接单"
: player.status === "busy"
? "忙碌"
: "离线"}
</Badge>
</div>
</div>
</CardHeader>
<CardContent className="pb-3">
<div className="flex flex-wrap gap-1">
{player.tags.map((tag) => (
<Badge key={tag} variant="outline" className="text-xs">
{tag}
</Badge>
))}
</div>
{player.shopName && (
<p className="text-xs text-muted-foreground mt-2">: {player.shopName}</p>
)}
</CardContent>
<CardFooter className="pt-0">
<Button variant="outline" size="sm" className="w-full" asChild>
<Link href={`/player/${player.id}`}></Link>
</Button>
</CardFooter>
</Card>
))}
</div>
</section>
<section>
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold"></h2>
<Button variant="ghost" size="sm" asChild>
<Link href="/search">
<ArrowRight className="ml-1 h-4 w-4" />
</Link>
</Button>
</div>
<div className="grid gap-4 md:grid-cols-2">
{mockShops.map((shop) => (
<Card key={shop.id} className="hover:shadow-md transition-shadow">
<CardHeader>
<CardTitle className="text-lg">{shop.name}</CardTitle>
<p className="text-sm text-muted-foreground">{shop.description}</p>
</CardHeader>
<CardContent>
<div className="flex items-center gap-4 text-sm">
<div className="flex items-center">
<Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400 mr-0.5" />
{shop.rating}
</div>
<div className="flex items-center text-muted-foreground">
<ShoppingBag className="h-3.5 w-3.5 mr-0.5" />
{shop.totalOrders}
</div>
<span className="text-muted-foreground">{shop.playerCount} </span>
</div>
</CardContent>
<CardFooter>
<Button variant="outline" size="sm" asChild>
<Link href={`/shop/${shop.id}`}></Link>
</Button>
</CardFooter>
</Card>
))}
</div>
</section>
</div>
)
}