zetaloop
226 lines
9.4 KiB
TypeScript
226 lines
9.4 KiB
TypeScript
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 { Input } from "@/components/ui/input"
|
||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { listGames, listPlayers, listShops } from "@/lib/api"
|
||
import { GameIcon } from "@/lib/game-icons"
|
||
|
||
export default function HomePage() {
|
||
const games = listGames()
|
||
const players = listPlayers()
|
||
const shops = listShops()
|
||
|
||
return (
|
||
<div className="container mx-auto py-8 px-4 space-y-12">
|
||
<section className="py-16 md:py-24 text-center">
|
||
<div className="space-y-8 max-w-3xl mx-auto">
|
||
<div className="space-y-4">
|
||
<h1 className="text-4xl md:text-6xl font-bold tracking-tighter leading-tight">
|
||
找到你的<span className="text-primary">游戏搭档</span>
|
||
</h1>
|
||
<p className="text-lg md:text-xl text-muted-foreground leading-relaxed">
|
||
找人一起打游戏，从这里开始
|
||
</p>
|
||
</div>
|
||
|
||
<div id="discover-search" className="w-full max-w-2xl mx-auto">
|
||
<form method="get" action="/search" className="relative flex items-center w-full">
|
||
<Search className="absolute left-4 h-5 w-5 text-muted-foreground z-10" />
|
||
<Input
|
||
type="text"
|
||
name="q"
|
||
placeholder="搜索陪玩、店铺、游戏..."
|
||
className="w-full h-14 pl-12 pr-32 rounded-full text-base shadow-sm bg-background"
|
||
/>
|
||
<Button type="submit" size="lg" className="absolute right-1.5 rounded-full px-8 h-11">
|
||
搜索
|
||
</Button>
|
||
</form>
|
||
</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"
|
||
className="text-muted-foreground hover:text-foreground"
|
||
asChild
|
||
>
|
||
<Link href="/search">
|
||
查看全部 <ArrowRight className="ml-1 h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
<div className="flex flex-wrap gap-3">
|
||
{games.map((game) => (
|
||
<Link
|
||
key={game.id}
|
||
href={`/search?game=${encodeURIComponent(game.name)}`}
|
||
className="flex items-center gap-2 rounded-full bg-muted/50 text-muted-foreground px-4 py-2 hover:bg-muted hover:text-foreground transition-all"
|
||
>
|
||
<GameIcon name={game.icon} className="h-5 w-5" />
|
||
<span className="text-sm font-medium">{game.name}</span>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="space-y-6">
|
||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||
<h2 className="text-xl font-semibold">推荐内容</h2>
|
||
<div className="flex flex-wrap items-center gap-4 text-sm">
|
||
<Link href="/search?sort=composite" className="text-primary font-medium">
|
||
综合排序
|
||
</Link>
|
||
<Link
|
||
href="/search?sort=rating"
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
评分最高
|
||
</Link>
|
||
<Link
|
||
href="/search?sort=orders"
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
接单最多
|
||
</Link>
|
||
<Link
|
||
href="/search?sort=price_asc"
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
价格最低
|
||
</Link>
|
||
<Link
|
||
href="/search?sort=price_desc"
|
||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
价格最高
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||
{/* Players */}
|
||
{players.map((player) => (
|
||
<Card
|
||
key={player.id}
|
||
className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60"
|
||
>
|
||
<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-primary text-primary 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 font-normal"
|
||
>
|
||
{player.status === "available"
|
||
? "可接单"
|
||
: player.status === "busy"
|
||
? "忙碌"
|
||
: "离线"}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent className="pb-3 flex-grow">
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{player.tags.map((tag) => (
|
||
<Badge
|
||
key={tag}
|
||
variant="secondary"
|
||
className="text-xs bg-muted/50 text-muted-foreground font-normal"
|
||
>
|
||
{tag}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
{player.shopName && (
|
||
<p className="text-xs text-muted-foreground mt-3">所属店铺: {player.shopName}</p>
|
||
)}
|
||
</CardContent>
|
||
<CardFooter className="pt-0 flex items-end justify-between">
|
||
<div className="flex items-baseline gap-1">
|
||
<span className="text-lg font-bold leading-none">
|
||
{player.services?.[0]?.price ?? 35}
|
||
</span>
|
||
<span className="text-xs text-muted-foreground">
|
||
元/{player.services?.[0]?.unit ?? "时"}
|
||
</span>
|
||
</div>
|
||
<Button variant="outline" size="sm" className="rounded-full px-6" asChild>
|
||
<Link href={`/player/${player.id}`}>查看详情</Link>
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
))}
|
||
|
||
{/* Community Teaser */}
|
||
<Card className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">逛逛社区</CardTitle>
|
||
<p className="text-sm text-muted-foreground">发现更多有趣的游戏日常和讨论</p>
|
||
</CardHeader>
|
||
<CardContent className="flex-grow flex items-center justify-center">
|
||
<div className="w-24 h-24 rounded-full bg-primary/10 flex items-center justify-center">
|
||
<Star className="h-10 w-10 text-primary" />
|
||
</div>
|
||
</CardContent>
|
||
<CardFooter>
|
||
<Button variant="outline" className="w-full rounded-full" asChild>
|
||
<Link href="/community">进入社区</Link>
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
|
||
{/* Shops */}
|
||
{shops.map((shop) => (
|
||
<Card
|
||
key={shop.id}
|
||
className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60"
|
||
>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{shop.name}</CardTitle>
|
||
<p className="text-sm text-muted-foreground">{shop.description}</p>
|
||
</CardHeader>
|
||
<CardContent className="flex-grow">
|
||
<div className="flex items-center gap-4 text-sm">
|
||
<div className="flex items-center">
|
||
<Star className="h-3.5 w-3.5 fill-primary text-primary 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" className="w-full rounded-full" asChild>
|
||
<Link href={`/shop/${shop.id}`}>进入店铺</Link>
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
)
|
||
}
|