61 lines
3.5 KiB
TypeScript
61 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import { Betslip } from "@/components/betting/betslip"
|
|
import { ReloadTicket } from "@/components/betting/reload-ticket"
|
|
import { CheckYourBet } from "@/components/betting/check-your-bet"
|
|
import { useState } from "react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
|
|
export function RightPanel() {
|
|
const [activeTab, setActiveTab] = useState<"betslip" | "myBets">("betslip")
|
|
|
|
return (
|
|
<aside className="hidden lg:flex w-[280px] shrink-0 flex-col gap-0 border-l border-border/30 bg-[#222]">
|
|
{/* Search Header */}
|
|
<div className="p-3 bg-[#1a1a1a] flex items-center justify-between border-b border-border/20">
|
|
<div className="flex items-center gap-2 text-[12px] font-bold text-white uppercase">
|
|
Fast Bet <span className="text-[#ff9800]">QBET</span>
|
|
<svg viewBox="0 0 24 24" className="size-4 fill-[#ff9800] ml-1"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-2 space-y-2">
|
|
<div className="grid grid-cols-2 gap-0.5">
|
|
<Input
|
|
type="text"
|
|
placeholder="Event Code"
|
|
className="bg-[#333] border border-border/40 px-2 py-1.5 h-auto text-[11px] outline-none text-white focus:border-[#ff9800] rounded-none shadow-none"
|
|
/>
|
|
<div className="bg-[#333] border border-border/40 px-2 py-1.5 text-[11px] text-muted-foreground flex items-center justify-center">...</div>
|
|
</div>
|
|
|
|
{/* Tab switcher */}
|
|
<div className="flex items-center justify-between text-[11px] font-bold py-2.5 px-1 border-b border-border/10">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[#ff9800] uppercase cursor-pointer">Betslip</span>
|
|
<span className="bg-[#ff9800] text-black px-1.5 rounded-full text-[10px] font-bold">0</span>
|
|
<Button
|
|
variant="ghost"
|
|
className="text-white uppercase flex items-center gap-1 ml-2 opacity-80 hover:opacity-100 p-0 h-auto font-bold text-[11px]"
|
|
>
|
|
<svg viewBox="0 0 24 24" className="size-3 fill-[#ff9800]"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
|
|
Settings
|
|
</Button>
|
|
</div>
|
|
<span className="text-white uppercase cursor-pointer opacity-80 hover:opacity-100">Decimal</span>
|
|
</div>
|
|
|
|
<div className="py-10 px-4 text-center">
|
|
<p className="text-[11px] text-muted-foreground font-medium leading-relaxed">
|
|
No bet has been selected. To select a bet, please click on the respective odds
|
|
</p>
|
|
</div>
|
|
|
|
<ReloadTicket />
|
|
<CheckYourBet />
|
|
</div>
|
|
</aside>
|
|
)
|
|
} |