e267fa09f6
Add fan group entry on live room; update planet matching with 4 type buttons. Co-authored-by: undefined <undefined+undefined@users.noreply.github.com>
210 lines
8.5 KiB
TypeScript
210 lines
8.5 KiB
TypeScript
"use client"
|
||
|
||
import { ArrowLeft, Users, Trophy, Star, Crown, TrendingUp, MessageCircle } from "lucide-react"
|
||
import { useRouter } from "next/navigation"
|
||
import Image from "next/image"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import { toast } from "@/hooks/use-toast"
|
||
|
||
export default function GuildPage() {
|
||
const router = useRouter()
|
||
|
||
const handleJoinGuild = (guildName: string) => {
|
||
toast({
|
||
title: "申请已发送",
|
||
description: `您的加入申请已发送至${guildName}，请等待审核`,
|
||
})
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen pb-24 bg-background">
|
||
{/* Header */}
|
||
<header className="sticky top-0 z-40 glass px-4 py-3 flex items-center gap-3">
|
||
<button onClick={() => router.back()} className="p-2 -ml-2 hover:bg-white/5 rounded-lg transition-colors">
|
||
<ArrowLeft size={20} />
|
||
</button>
|
||
<h1 className="font-bold text-lg">公会中心</h1>
|
||
</header>
|
||
|
||
<div className="p-4 space-y-6">
|
||
{/* My Guild Status */}
|
||
<div className="glass-card p-4 rounded-xl border-l-4 border-primary">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className="font-bold text-sm">我的公会</h3>
|
||
<span className="text-xs text-white/50">暂未加入</span>
|
||
</div>
|
||
<p className="text-xs text-white/60 mb-3">加入公会，享受更多福利和资源支持</p>
|
||
<div className="grid grid-cols-3 gap-2 text-center">
|
||
<div className="bg-white/5 rounded-lg p-2">
|
||
<div className="text-xs font-bold text-primary">专属培训</div>
|
||
<div className="text-[10px] text-white/50 mt-0.5">技能提升</div>
|
||
</div>
|
||
<div className="bg-white/5 rounded-lg p-2">
|
||
<div className="text-xs font-bold text-secondary">优先接单</div>
|
||
<div className="text-[10px] text-white/50 mt-0.5">更多机会</div>
|
||
</div>
|
||
<div className="bg-white/5 rounded-lg p-2">
|
||
<div className="text-xs font-bold text-accent">收益分成</div>
|
||
<div className="text-[10px] text-white/50 mt-0.5">额外奖励</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Guild Rankings */}
|
||
<Tabs defaultValue="hot" className="w-full">
|
||
<TabsList className="w-full bg-white/5 p-1 rounded-xl">
|
||
<TabsTrigger value="hot" className="flex-1 text-xs">
|
||
热门公会
|
||
</TabsTrigger>
|
||
<TabsTrigger value="new" className="flex-1 text-xs">
|
||
新晋公会
|
||
</TabsTrigger>
|
||
<TabsTrigger value="top" className="flex-1 text-xs">
|
||
排行榜
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="hot" className="mt-4 space-y-3">
|
||
{[
|
||
{
|
||
name: "东东电竞",
|
||
level: 10,
|
||
members: 1205,
|
||
income: "月入50万+",
|
||
tags: ["全能", "陪玩", "培训"],
|
||
logo: "esports guild logo gold premium",
|
||
rank: 1,
|
||
},
|
||
{
|
||
name: "机枪电竞",
|
||
level: 8,
|
||
members: 680,
|
||
income: "月入30万+",
|
||
tags: ["LOL", "云顶", "代练"],
|
||
logo: "esports guild logo red aggressive",
|
||
rank: 2,
|
||
},
|
||
{
|
||
name: "洲越电竞",
|
||
level: 6,
|
||
members: 320,
|
||
income: "月入15万+",
|
||
tags: ["三角洲", "无畏契约"],
|
||
logo: "esports guild logo blue tactical",
|
||
rank: 3,
|
||
},
|
||
{
|
||
name: "星辰公会",
|
||
level: 7,
|
||
members: 450,
|
||
income: "月入20万+",
|
||
tags: ["王者", "吃鸡", "陪玩"],
|
||
logo: "esports guild logo purple cosmic",
|
||
rank: 4,
|
||
},
|
||
].map((guild, i) => (
|
||
<div key={i} className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors">
|
||
<div className="flex items-start gap-3 mb-3">
|
||
<div className="relative">
|
||
<div className="w-16 h-16 rounded-lg bg-muted relative overflow-hidden">
|
||
<Image
|
||
src={`/guild-logo-${i}.jpg?height=100&width=100&query=${guild.logo}`}
|
||
alt={guild.name}
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</div>
|
||
{guild.rank <= 3 && (
|
||
<div className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center text-[10px] font-bold">
|
||
{guild.rank}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<h4 className="font-bold truncate">{guild.name}</h4>
|
||
<div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-primary/20 text-primary text-[10px]">
|
||
<Crown size={10} />
|
||
Lv.{guild.level}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 text-xs text-white/50 mb-2">
|
||
<span className="flex items-center gap-1">
|
||
<Users size={12} />
|
||
{guild.members}人
|
||
</span>
|
||
<span className="flex items-center gap-1">
|
||
<TrendingUp size={12} />
|
||
{guild.income}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-1">
|
||
{guild.tags.map((tag, j) => (
|
||
<span key={j} className="px-2 py-0.5 rounded-full bg-white/5 text-[10px] text-white/60">
|
||
{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-2">
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
className="flex-1 h-8 text-xs border-white/10 hover:bg-white/5 bg-transparent"
|
||
onClick={() => router.push(`/guild/${guild.name}`)}
|
||
>
|
||
<MessageCircle size={14} className="mr-1" />
|
||
了解详情
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
className="flex-1 h-8 text-xs bg-primary hover:bg-primary/90"
|
||
onClick={() => handleJoinGuild(guild.name)}
|
||
>
|
||
<Star size={14} className="mr-1" />
|
||
申请加入
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</TabsContent>
|
||
|
||
<TabsContent value="new" className="mt-4">
|
||
<div className="text-center py-12 text-white/40 text-sm">新晋公会列表开发中...</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="top" className="mt-4">
|
||
<div className="text-center py-12 text-white/40 text-sm">公会排行榜开发中...</div>
|
||
</TabsContent>
|
||
</Tabs>
|
||
|
||
{/* Create Guild CTA */}
|
||
<div className="glass-card p-4 rounded-xl bg-gradient-to-r from-primary/10 to-purple-500/10 border border-primary/20">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
|
||
<Trophy className="text-primary" size={24} />
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="font-bold text-sm mb-1">创建自己的公会</h3>
|
||
<p className="text-xs text-white/60">招募成员，共创辉煌</p>
|
||
</div>
|
||
<Button
|
||
size="sm"
|
||
className="bg-primary hover:bg-primary/90 h-8 text-xs"
|
||
onClick={() => toast({ title: "即将开放", description: "公会创建功能正在开发中" })}
|
||
>
|
||
立即创建
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|