190 lines
9.8 KiB
TypeScript
190 lines
9.8 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Link from "next/link"
|
|
import { popularLeagues } from "@/lib/mock-data"
|
|
import { cn } from "@/lib/utils"
|
|
import { Button } from "@/components/ui/button"
|
|
import { ChevronsLeft } from "lucide-react"
|
|
|
|
/** Soccer ball icon - outline style for white/green theme */
|
|
function SoccerBallIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M12 2v20M2 12h20" />
|
|
<path d="M4.93 4.93l14.14 14.14M4.93 19.07l14.14-14.14" strokeWidth="1" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
const sportCategories = [
|
|
{ id: "football", name: "Football", icon: "⚽", count: 1412 },
|
|
{ id: "tennis", name: "Tennis", icon: "🎾", count: 67 },
|
|
{ id: "basketball", name: "Basketball", icon: "🏀", count: 255 },
|
|
{ id: "ice-hockey", name: "Ice Hockey", icon: "🏒", count: 238 },
|
|
{ id: "mma", name: "MMA", icon: "🥊", count: 51 },
|
|
{ id: "handball", name: "Handball", icon: "🤾", count: 92 },
|
|
{ id: "darts", name: "Darts", icon: "🎯", count: 25 },
|
|
{ id: "snooker", name: "Snooker", icon: "🎱", count: 3 },
|
|
{ id: "cricket", name: "Cricket", icon: "🏏", count: 42 },
|
|
{ id: "dota2", name: "Dota 2", icon: "🎮", count: 2 },
|
|
{ id: "rugby", name: "Rugby", icon: "🏉", count: 41 },
|
|
{ id: "volleyball", name: "Volleyball", icon: "🏐", count: 69 },
|
|
]
|
|
|
|
export function SportsSidebar() {
|
|
const [activeSport, setActiveSport] = useState("football")
|
|
|
|
return (
|
|
<aside className="hidden h-full w-[280px] shrink-0 bg-brand-surface-light lg:block overflow-y-auto border-r border-border/40 scrollbar-hide">
|
|
{/* Sports Menu Header */}
|
|
<div className="bg-brand-surface px-3 py-2 text-[11px] font-black text-white uppercase tracking-tighter flex items-center justify-between border-b border-border/30 h-10">
|
|
<span>Sports Menu</span>
|
|
<button type="button" className="p-1 rounded hover:bg-white/10 text-white/70 hover:text-white transition-colors" aria-label="Collapse sidebar">
|
|
<ChevronsLeft className="size-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Top Leagues Header */}
|
|
<div className="bg-brand-surface-light px-3 py-2.5 text-[11px] font-black text-brand-primary uppercase text-center border-b border-border/20 flex items-center justify-center gap-2">
|
|
Top Leagues
|
|
</div>
|
|
|
|
{/* Popular Leagues */}
|
|
<div className="flex flex-col">
|
|
{popularLeagues.map((league) => (
|
|
<Link
|
|
key={league.id}
|
|
href={`/?league=${league.id}`}
|
|
className="w-full flex items-center justify-between px-3 py-2 text-left text-white/90 hover:bg-brand-surface transition-colors border-b border-border/10 group h-9"
|
|
>
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<div className="size-5 shrink-0 overflow-hidden rounded-sm flex items-center justify-center bg-white/5 border border-white/10 group-hover:border-white/20 transition-colors">
|
|
{league.logo ? (
|
|
<img src={league.logo} alt="" className="size-full object-contain" />
|
|
) : (
|
|
<span className="text-[11px]">⚽</span>
|
|
)}
|
|
</div>
|
|
<span className="text-white/50 text-[8px] font-bold select-none">•</span>
|
|
<span className="text-[10.5px] font-bold leading-tight truncate max-w-[140px]">{league.name}</span>
|
|
</div>
|
|
<SoccerBallIcon className="size-4 shrink-0 text-white/40 group-hover:text-brand-primary transition-colors" />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* In-Play Strip */}
|
|
<Button asChild className="w-full bg-[#004d40] text-[#00bfa5] hover:bg-[#003d33] border-none py-2.5 h-auto text-[11px] font-black uppercase rounded-none tracking-[2px]">
|
|
<Link href="/live">
|
|
<span className="size-2 rounded-full bg-brand-primary mr-2 live-dot shadow-[0_0_8px_var(--brand-primary)]"></span>
|
|
IN-PLAY
|
|
</Link>
|
|
</Button>
|
|
|
|
{/* Quick Filter Section */}
|
|
<div className="bg-brand-surface p-3 border-b border-border/30">
|
|
<span className="text-brand-primary text-[10.5px] uppercase font-black block mb-2 tracking-tight">Quick Filter</span>
|
|
<div className="grid grid-cols-6 gap-[1px]">
|
|
{["All", "Today", "3h", "6h", "9h", "12h"].map((t) => (
|
|
<button key={t} className={cn(
|
|
"text-[10px] py-1.5 font-bold transition-colors",
|
|
t === "All" ? "bg-brand-surface-light text-white" : "bg-brand-surface text-white/50 hover:text-white"
|
|
)}>{t}</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search Event Section */}
|
|
<div className="bg-brand-surface p-3 border-b border-border/40">
|
|
<span className="text-brand-primary text-[10.5px] uppercase font-black block mb-1 tracking-tight">Search Event</span>
|
|
<p className="text-[9px] text-white/30 mb-2 leading-tight font-medium uppercase">Insert the events name or at least one team in the form below</p>
|
|
<div className="flex flex-col gap-1.5">
|
|
<div className="relative">
|
|
<input type="text" className="bg-brand-surface-light border-none text-white text-[11px] px-3 py-2 w-full focus:ring-0 placeholder:text-white/20" placeholder="Search" />
|
|
</div>
|
|
<Button className="bg-brand-primary text-black hover:bg-brand-primary-hover py-2 h-auto rounded-none text-[11px] font-black uppercase tracking-wider">Search</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sport categories */}
|
|
<div className="divide-y divide-border/10 bg-brand-surface-light">
|
|
{sportCategories.map((sport) => (
|
|
<button
|
|
key={sport.id}
|
|
onClick={() => setActiveSport(sport.id)}
|
|
className={cn(
|
|
"w-full flex items-center justify-between px-3 py-2 text-left transition-colors border-b border-border/10 h-9",
|
|
activeSport === sport.id
|
|
? "bg-brand-surface text-white"
|
|
: "text-white/70 hover:bg-brand-surface hover:text-white"
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-[12px] opacity-80 shrink-0">{sport.icon}</span>
|
|
<span className="text-[10.5px] font-bold tracking-tight">{sport.name}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[10px] font-bold text-white/40">{sport.count}</span>
|
|
<SoccerBallIcon className="size-3.5 text-white/30 shrink-0" />
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bet Services */}
|
|
<div className="mt-2 text-[11px] font-bold text-brand-primary px-3 py-2 uppercase border-y border-border/20 bg-brand-surface">
|
|
Bet Services
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-0 border-b border-border/10">
|
|
<Button
|
|
variant="ghost"
|
|
type="button"
|
|
className="flex flex-col items-center justify-center py-4 h-auto rounded-none border-r border-border/10 hover:bg-brand-surface group"
|
|
onClick={() => {
|
|
const w = 1200
|
|
const h = 800
|
|
const left = typeof window !== "undefined" ? Math.max(0, (window.screen.width - w) / 2) : 0
|
|
const top = typeof window !== "undefined" ? Math.max(0, (window.screen.height - h) / 2) : 0
|
|
window.open(
|
|
"https://s5.sir.sportradar.com/betinaction/en",
|
|
"LiveScore",
|
|
`noopener,noreferrer,width=${w},height=${h},left=${left},top=${top},scrollbars=yes,resizable=yes`
|
|
)
|
|
}}
|
|
>
|
|
<svg viewBox="0 0 24 24" className="size-5 mb-1.5 fill-muted-foreground group-hover:fill-brand-primary transition-colors"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm3.3 14.71L11 12.41V7h2v4.59l3.71 3.71-1.42 1.41z"/></svg>
|
|
<span className="text-[9px] text-white font-medium">Live Score</span>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
type="button"
|
|
className="flex flex-col items-center justify-center py-4 h-auto rounded-none border-r border-border/10 hover:bg-brand-surface group"
|
|
onClick={() => {
|
|
const w = 1200
|
|
const h = 800
|
|
const left = typeof window !== "undefined" ? Math.max(0, (window.screen.width - w) / 2) : 0
|
|
const top = typeof window !== "undefined" ? Math.max(0, (window.screen.height - h) / 2) : 0
|
|
window.open(
|
|
"https://statistics.betconstruct.com/#/en",
|
|
"Results",
|
|
`noopener,noreferrer,width=${w},height=${h},left=${left},top=${top},scrollbars=yes,resizable=yes`
|
|
)
|
|
}}
|
|
>
|
|
<svg viewBox="0 0 24 24" className="size-5 mb-1.5 fill-muted-foreground group-hover:fill-brand-primary transition-colors"><path d="M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z"/></svg>
|
|
<span className="text-[9px] text-white font-medium">Results</span>
|
|
</Button>
|
|
<Button variant="ghost" asChild className="flex flex-col items-center justify-center py-4 h-auto rounded-none hover:bg-brand-surface group">
|
|
<Link href="/print-odds" className="flex flex-col items-center justify-center">
|
|
<svg viewBox="0 0 24 24" className="size-5 mb-1.5 fill-muted-foreground group-hover:fill-brand-primary transition-colors"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>
|
|
<span className="text-[9px] text-white font-medium">Print Odds</span>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
</aside>
|
|
)
|
|
}
|