brooktewabe
612bb9386b
- Implemented HeroBanner component for image carousel with navigation arrows and indicators. - Created LiveEventsList component to display live events with odds and match details. - Added SportsNav component for sport category navigation with icons. - Introduced TopMatches component to showcase highlighted matches with odds. - Updated InPlayHeader and QuickFilterBar for improved UI and functionality. - Enhanced ReloadTicket and SearchEvent components for better user experience. - Refactored SportsSidebar to include popular leagues and quick filter options. - Added new sport-home layout to integrate various betting components.
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { Tabs, TabsList, TabsTrigger } 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() {
|
|
return (
|
|
<Tabs defaultValue="football" className="w-full">
|
|
<TabsList variant="hs-nav" className="h-auto">
|
|
{sports.map((sport) => (
|
|
<TabsTrigger
|
|
key={sport.id}
|
|
value={sport.id}
|
|
className="flex-col min-w-[70px] py-2 gap-1"
|
|
>
|
|
<span className="text-xl">{sport.icon}</span>
|
|
<span className="text-[10px] font-bold uppercase">{sport.name}</span>
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</Tabs>
|
|
)
|
|
}
|