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.
103 lines
4.5 KiB
TypeScript
103 lines
4.5 KiB
TypeScript
import { ChevronRight } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
const topMatches = [
|
|
{
|
|
id: "tm1",
|
|
league: "England - Premier League",
|
|
time: "05:00 PM",
|
|
homeTeam: "Nottingham Forest",
|
|
awayTeam: "Liverpool",
|
|
odds: { home: 4.09, draw: 3.93, away: 1.82 }
|
|
},
|
|
{
|
|
id: "tm2",
|
|
league: "England - Premier League",
|
|
time: "11:00 PM",
|
|
homeTeam: "Man City",
|
|
awayTeam: "Newcastle",
|
|
odds: { home: 1.50, draw: 5.17, away: 5.93 }
|
|
},
|
|
{
|
|
id: "tm3",
|
|
league: "England - Premier League",
|
|
time: "06:00 PM",
|
|
homeTeam: "Chelsea",
|
|
awayTeam: "Burnley",
|
|
odds: { home: 1.21, draw: 6.91, away: 11.50 }
|
|
},
|
|
{
|
|
id: "tm4",
|
|
league: "Spain - LaLiga",
|
|
time: "07:30 PM",
|
|
homeTeam: "Arsenal",
|
|
awayTeam: "Wolves",
|
|
odds: { home: 1.56, draw: 4.16, away: 5.80 }
|
|
},
|
|
{
|
|
id: "tm5",
|
|
league: "Italy - Serie A",
|
|
time: "09:45 PM",
|
|
homeTeam: "Inter Milan",
|
|
awayTeam: "Napoli",
|
|
odds: { home: 1.85, draw: 3.60, away: 4.20 }
|
|
}
|
|
]
|
|
|
|
export function TopMatches() {
|
|
return (
|
|
<div className="flex gap-3 overflow-x-auto pb-2 scrollbar-hide -mx-1 px-1">
|
|
{topMatches.map((match) => (
|
|
<div
|
|
key={match.id}
|
|
className="min-w-[280px] bg-[#222] border border-border/20 rounded-sm overflow-hidden flex flex-col relative group"
|
|
>
|
|
{/* Top Label Ribbon */}
|
|
<div className="absolute top-0 right-0 w-12 h-12 overflow-hidden z-10 pointer-events-none">
|
|
<div className="absolute top-[6px] right-[-14px] bg-[#ff9800] text-black text-[8px] font-black py-0.5 px-6 rotate-45 shadow-sm uppercase tracking-tighter">
|
|
TOP
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-[#1a1a1a] px-3 py-1.5 flex items-center justify-between text-[10px] text-muted-foreground border-b border-border/10">
|
|
<div className="flex items-center gap-1">
|
|
<span className="font-bold text-[#ff9800]">{match.league}</span>
|
|
<span className="font-black text-white ml-1 italic">{match.time}</span>
|
|
</div>
|
|
<ChevronRight className="size-3 text-white/20 mr-4" />
|
|
</div>
|
|
|
|
<div className="p-3 flex flex-col gap-3">
|
|
<div className="flex items-center justify-between gap-1">
|
|
<div className="flex items-center gap-2 flex-1 min-w-0">
|
|
<div className="size-4 shrink-0 bg-white/5 rounded-sm flex items-center justify-center text-[9px] border border-white/10">⚽</div>
|
|
<span className="text-[11px] font-black text-white truncate uppercase italic">{match.homeTeam}</span>
|
|
</div>
|
|
<span className="text-[#ff9800] text-[9.5px] font-black italic shrink-0 px-2 opacity-60">VS</span>
|
|
<div className="flex items-center gap-2 flex-1 min-w-0 justify-end">
|
|
<span className="text-[11px] font-black text-white truncate uppercase italic text-right">{match.awayTeam}</span>
|
|
<div className="size-4 shrink-0 bg-white/5 rounded-sm flex items-center justify-center text-[9px] border border-white/10">⚽</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-[1px] bg-white/5 mx-2 mb-2 rounded-sm overflow-hidden border border-white/5">
|
|
<button className="bg-[#1a1a1a] hover:bg-[#333] flex items-center justify-between px-2.5 py-1.5 transition-colors group/btn">
|
|
<span className="text-[10px] font-black text-white/40 group-hover/btn:text-white">1</span>
|
|
<span className="text-[11px] font-black text-[#ff9800] tabular-nums">{match.odds.home.toFixed(2)}</span>
|
|
</button>
|
|
<button className="bg-[#1a1a1a] hover:bg-[#333] flex items-center justify-between px-2.5 py-1.5 transition-colors border-x border-white/5 group/btn">
|
|
<span className="text-[10px] font-black text-white/40 group-hover/btn:text-white">X</span>
|
|
<span className="text-[11px] font-black text-[#ff9800] tabular-nums">{match.odds.draw.toFixed(2)}</span>
|
|
</button>
|
|
<button className="bg-[#1a1a1a] hover:bg-[#333] flex items-center justify-between px-2.5 py-1.5 transition-colors group/btn">
|
|
<span className="text-[10px] font-black text-white/40 group-hover/btn:text-white">2</span>
|
|
<span className="text-[11px] font-black text-[#ff9800] tabular-nums">{match.odds.away.toFixed(2)}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|