250 lines
12 KiB
TypeScript
250 lines
12 KiB
TypeScript
"use client"
|
||
|
||
import Image from "next/image"
|
||
import {
|
||
ArrowLeft,
|
||
Play,
|
||
ChevronDown,
|
||
Clock,
|
||
MapPin,
|
||
Maximize2,
|
||
Users,
|
||
Eye,
|
||
Share2,
|
||
Heart,
|
||
MoreHorizontal,
|
||
} from "lucide-react"
|
||
import { Button } from "@/components/ui/button"
|
||
import { useState } from "react"
|
||
|
||
export default function ZoneVenuePage() {
|
||
const [activeTab, setActiveTab] = useState("highlights")
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-white">
|
||
{/* Header with premium background */}
|
||
<div className="relative h-64 bg-gradient-to-br from-gray-900 via-blue-900 to-red-900 overflow-hidden">
|
||
<div className="absolute inset-0 bg-black bg-opacity-40"></div>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20"></div>
|
||
|
||
{/* Header Controls */}
|
||
<div className="relative z-10 p-4 flex items-center justify-between">
|
||
<div className="w-10 h-10 bg-black/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
|
||
<ArrowLeft className="w-5 h-5 text-white" />
|
||
</div>
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 bg-black/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
|
||
<Share2 className="w-5 h-5 text-white" />
|
||
</div>
|
||
<div className="w-10 h-10 bg-black/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
|
||
<MoreHorizontal className="w-5 h-5 text-white" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Venue Info Card with glassmorphism */}
|
||
<div className="absolute bottom-0 left-0 right-0 bg-white/90 backdrop-blur-xl rounded-t-3xl p-6 border-t border-white/20">
|
||
<div className="flex items-center space-x-4">
|
||
<div className="relative">
|
||
<div className="w-20 h-20 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl flex items-center justify-center overflow-hidden shadow-xl">
|
||
<span className="text-white font-bold text-2xl">R</span>
|
||
</div>
|
||
<div className="absolute -top-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white flex items-center justify-center">
|
||
<div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
|
||
</div>
|
||
</div>
|
||
<div className="flex-1">
|
||
<h1 className="text-2xl font-bold text-gray-900 mb-1">RONIN黄金篮球馆</h1>
|
||
<p className="text-sm text-gray-500 flex items-center mb-2">
|
||
<MapPin className="w-4 h-4 mr-1" />
|
||
杭州拱墅区黑马路124号（肯德基对面）
|
||
</p>
|
||
<div className="flex items-center space-x-4 text-xs text-gray-500">
|
||
<div className="flex items-center space-x-1">
|
||
<Users className="w-3 h-3" />
|
||
<span>1,234 关注</span>
|
||
</div>
|
||
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
|
||
<div className="flex items-center space-x-1">
|
||
<Eye className="w-3 h-3" />
|
||
<span>今日 856 观看</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main Video Player with enhanced styling */}
|
||
<div className="px-4 pt-8">
|
||
<div className="bg-white/80 backdrop-blur-sm rounded-3xl overflow-hidden shadow-2xl shadow-gray-200/50 border border-gray-100/50">
|
||
<div className="relative">
|
||
<Image
|
||
src="/placeholder.svg?height=300&width=600&text=Basketball+Game"
|
||
alt="Basketball game"
|
||
width={600}
|
||
height={300}
|
||
className="w-full h-64 object-cover"
|
||
/>
|
||
<div className="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center">
|
||
<div className="w-20 h-20 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 hover:scale-110">
|
||
<Play className="w-10 h-10 text-gray-800 ml-1" fill="currentColor" />
|
||
</div>
|
||
</div>
|
||
<div className="absolute bottom-4 right-4">
|
||
<div className="bg-black/30 backdrop-blur-sm rounded-xl p-2 transition-all duration-300 hover:scale-105">
|
||
<Maximize2 className="w-5 h-5 text-white" />
|
||
</div>
|
||
</div>
|
||
<div className="absolute bottom-4 left-4 flex space-x-2">
|
||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||
<div className="w-2 h-2 bg-white bg-opacity-50 rounded-full"></div>
|
||
<div className="w-2 h-2 bg-white bg-opacity-50 rounded-full"></div>
|
||
</div>
|
||
<div className="absolute top-4 left-4">
|
||
<div className="bg-red-500/90 backdrop-blur-sm text-white px-3 py-1 rounded-xl text-sm font-semibold flex items-center">
|
||
<div className="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></div>
|
||
直播中
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="flex items-center space-x-2">
|
||
<Heart className="w-5 h-5 text-red-500" />
|
||
<span className="text-sm font-medium text-gray-600">2.1k</span>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Eye className="w-5 h-5 text-gray-400" />
|
||
<span className="text-sm font-medium text-gray-600">856</span>
|
||
</div>
|
||
</div>
|
||
<div className="text-xs text-gray-500">2分钟前更新</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Navigation Tabs with enhanced styling */}
|
||
<div className="px-4 mt-8">
|
||
<div className="bg-white/80 backdrop-blur-sm rounded-2xl p-1 shadow-lg shadow-gray-200/30 border border-gray-100/50">
|
||
<div className="flex">
|
||
<button
|
||
onClick={() => setActiveTab("highlights")}
|
||
className={`flex-1 py-3 px-4 rounded-xl font-semibold text-sm transition-all duration-300 ${
|
||
activeTab === "highlights"
|
||
? "bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] text-white shadow-lg shadow-[#05C7C7]/20"
|
||
: "text-gray-500 hover:text-gray-700"
|
||
}`}
|
||
>
|
||
精彩瞬间
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab("replay")}
|
||
className={`flex-1 py-3 px-4 rounded-xl font-semibold text-sm transition-all duration-300 ${
|
||
activeTab === "replay"
|
||
? "bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] text-white shadow-lg shadow-[#05C7C7]/20"
|
||
: "text-gray-500 hover:text-gray-700"
|
||
}`}
|
||
>
|
||
直播回放
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Court and Time Selection with premium styling */}
|
||
<div className="px-4 mt-6 flex space-x-3">
|
||
<div className="flex items-center space-x-3 bg-white/80 backdrop-blur-sm rounded-2xl px-4 py-3 shadow-lg shadow-gray-200/30 border border-gray-100/50 transition-all duration-300 hover:scale-[1.02]">
|
||
<div className="w-4 h-4 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full shadow-sm"></div>
|
||
<span className="text-sm font-semibold text-gray-900">1号篮球场</span>
|
||
<ChevronDown className="w-4 h-4 text-gray-400" />
|
||
</div>
|
||
<div className="flex items-center space-x-3 bg-white/80 backdrop-blur-sm rounded-2xl px-4 py-3 shadow-lg shadow-gray-200/30 border border-gray-100/50 transition-all duration-300 hover:scale-[1.02]">
|
||
<Clock className="w-4 h-4 text-gray-400" />
|
||
<span className="text-sm font-semibold text-gray-900">今日 08:20 ~ 22:00</span>
|
||
<ChevronDown className="w-4 h-4 text-gray-400" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Video Grid with enhanced styling */}
|
||
<div className="px-4 mt-6 grid grid-cols-2 gap-4">
|
||
{/* Live Video */}
|
||
<div className="relative group">
|
||
<div className="bg-white/80 backdrop-blur-sm rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-2xl">
|
||
<div className="relative">
|
||
<Image
|
||
src="/placeholder.svg?height=150&width=200&text=Live+Game"
|
||
alt="Live basketball game"
|
||
width={200}
|
||
height={150}
|
||
className="w-full h-32 object-cover"
|
||
/>
|
||
<div className="absolute top-2 left-2">
|
||
<div className="bg-[#05C7C7]/90 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs font-semibold flex items-center">
|
||
<div className="w-1.5 h-1.5 bg-white rounded-full mr-1 animate-pulse"></div>
|
||
正在播放
|
||
</div>
|
||
</div>
|
||
<div className="absolute top-2 right-2">
|
||
<div className="w-6 h-6 bg-white/80 backdrop-blur-sm rounded-full"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Other Videos */}
|
||
{[1, 2, 3, 4, 5].map((index) => (
|
||
<div key={index} className="relative group">
|
||
<div className="bg-white/80 backdrop-blur-sm rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-2xl">
|
||
<div className="relative">
|
||
<Image
|
||
src={`/placeholder.svg?height=150&width=200&text=Game+${index + 1}`}
|
||
alt={`Basketball game ${index + 1}`}
|
||
width={200}
|
||
height={150}
|
||
className="w-full h-32 object-cover"
|
||
/>
|
||
<div className="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center rounded-3xl">
|
||
<div className="w-10 h-10 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center transition-all duration-300 group-hover:scale-110">
|
||
<Play className="w-5 h-5 text-gray-800 ml-0.5" fill="currentColor" />
|
||
</div>
|
||
</div>
|
||
<div className="absolute top-2 right-2">
|
||
<div className="w-6 h-6 bg-white/80 backdrop-blur-sm rounded-full"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Bottom Notice with enhanced styling */}
|
||
<div className="px-4 mt-8">
|
||
<div className="bg-orange-50/80 backdrop-blur-sm border border-orange-200/50 rounded-2xl p-4 flex items-center justify-center">
|
||
<div className="w-5 h-5 border-2 border-orange-400 rounded-full flex items-center justify-center mr-3">
|
||
<span className="text-orange-400 text-xs font-bold">!</span>
|
||
</div>
|
||
<span className="text-sm text-orange-600 font-medium">视频云端保存仅7天，请及时下载</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom Actions - Fixed with glassmorphism */}
|
||
<div className="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-xl border-t border-gray-200/50 px-4 py-4 flex space-x-4">
|
||
<Button className="flex-1 bg-gradient-to-r from-orange-400 to-red-500 hover:from-orange-500 hover:to-red-600 text-white py-4 rounded-2xl font-bold shadow-xl shadow-orange-400/30 transition-all duration-300 hover:scale-[1.02]">
|
||
合成剪辑
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
className="text-gray-600 font-semibold px-6 py-4 rounded-2xl transition-all duration-300 hover:bg-gray-100/50"
|
||
>
|
||
创作记录 →
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Bottom Spacing for Fixed Actions */}
|
||
<div className="h-24"></div>
|
||
</div>
|
||
)
|
||
}
|