brooktewabe
8941c45555
- Updated LiveEventsList to use live data from the live store and improved event rendering with links to event details. - Enhanced MatchDetailView to accept API sections for dynamic market rendering and improved state management for expanded sections. - Modified SportsNav to utilize search parameters for active sport highlighting. - Refactored TopMatches to fetch live match data and odds from the API, replacing static fallback data. - Improved UI elements for better responsiveness and user experience across components.
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { useSearchParams } from "next/navigation"
|
|
import { TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Tabs } from "@/components/ui/tabs"
|
|
|
|
const sports = [
|
|
{ id: "football", name: "Football", icon: "⚽" },
|
|
{ id: "tennis", name: "Tennis", icon: "🎾" },
|
|
{ id: "basketball", name: "Basketball", icon: "🏀" },
|
|
{ id: "ice-hockey", name: "Ice Hockey", icon: "🏒" },
|
|
{ id: "mma", name: "MMA", icon: "🥋" },
|
|
{ id: "handball", name: "Handball", icon: "🤾" },
|
|
{ id: "darts", name: "Darts", icon: "🎯" },
|
|
{ id: "snooker", name: "Snooker", icon: "🎱" },
|
|
{ id: "cricket", name: "Cricket", icon: "🏏" },
|
|
{ id: "dota2", name: "Dota 2", icon: "🎮" },
|
|
]
|
|
|
|
export function SportsNav() {
|
|
const searchParams = useSearchParams()
|
|
const currentSport = searchParams.get("sport") ?? "football"
|
|
|
|
return (
|
|
<Tabs value={currentSport} className="w-full">
|
|
<TabsList variant="hs-nav" className="min-h-14! h-auto! py-2">
|
|
{sports.map((sport) => (
|
|
<TabsTrigger
|
|
key={sport.id}
|
|
value={sport.id}
|
|
asChild
|
|
className="flex-col min-w-[70px] py-2 gap-1"
|
|
>
|
|
<Link href={`/?sport=${sport.id}`} scroll={false} className="flex flex-col items-center gap-1">
|
|
<span className="text-xl">{sport.icon}</span>
|
|
<span className="text-[10px] font-bold uppercase">{sport.name}</span>
|
|
</Link>
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</Tabs>
|
|
)
|
|
}
|