89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
"use client"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { Search, Heart, Clock, Star, Zap, LayoutGrid, Gamepad2, Award, Coins, Flame, Trophy } from "lucide-react"
|
|
|
|
export type GameCategory =
|
|
| "all"
|
|
| "search"
|
|
| "favourite"
|
|
| "recently-played"
|
|
| "most-popular"
|
|
| "fortune-special"
|
|
| "for-you"
|
|
| "slots"
|
|
| "crash-games"
|
|
| "higher-lower"
|
|
| "smartsoft"
|
|
| "keno-spin"
|
|
| "pragmatic-play"
|
|
| "evoplay-bonus"
|
|
|
|
interface VirtualSidebarProps {
|
|
activeCategory: GameCategory
|
|
onCategoryChange: (category: GameCategory) => void
|
|
}
|
|
|
|
const categories = [
|
|
{ id: "all", name: "Virtual", icon: Star, subtitle: "Check out our games!", hasChevron: true },
|
|
{ id: "search", name: "Search", icon: Search },
|
|
{ id: "favourite", name: "Favourite", icon: Heart },
|
|
{ id: "recently-played", name: "Recently Played", icon: Clock },
|
|
{ id: "most-popular", name: "Most Popular", icon: Star },
|
|
{ id: "fortune-special", name: "Fortune Special", icon: Star },
|
|
{ id: "for-you", name: "For You", icon: Star },
|
|
{ id: "slots", name: "Slots", icon: Star },
|
|
{ id: "crash-games", name: "Crash Games", icon: Star },
|
|
{ id: "higher-lower", name: "Higher Lower", icon: Star },
|
|
{ id: "smartsoft", name: "Smartsoft", icon: Star },
|
|
{ id: "keno-spin", name: "Keno & Spin", icon: Star },
|
|
{ id: "pragmatic-play", name: "Pragmatic Play", icon: Star },
|
|
{ id: "evoplay-bonus", name: "EvoPlay BONUS", icon: Star },
|
|
]
|
|
|
|
export function VirtualSidebar({ activeCategory, onCategoryChange }: VirtualSidebarProps) {
|
|
return (
|
|
<aside className="hidden h-full w-[240px] shrink-0 bg-brand-surface-light lg:block overflow-y-auto border-r border-border/40 scrollbar-hide">
|
|
<div className="flex flex-col gap-[1px]">
|
|
{categories.map((cat) => {
|
|
const Icon = cat.icon
|
|
const isActive = activeCategory === cat.id
|
|
|
|
return (
|
|
<button
|
|
key={cat.id}
|
|
onClick={() => onCategoryChange(cat.id as GameCategory)}
|
|
className={cn(
|
|
"w-full flex flex-col px-3 py-2 text-left transition-colors border-b border-border/5",
|
|
isActive
|
|
? "bg-brand-surface border-l-4 border-l-brand-primary"
|
|
: "bg-brand-surface-light hover:bg-brand-surface"
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between w-full">
|
|
<div className="flex items-center gap-3">
|
|
<Icon className={cn("size-4", isActive ? "text-brand-primary" : "text-white/60")} />
|
|
<div className="flex flex-col">
|
|
<span className={cn(
|
|
"text-[12px] font-bold tracking-tight",
|
|
isActive ? "text-white" : "text-white/80"
|
|
)}>
|
|
{cat.name}
|
|
</span>
|
|
{cat.subtitle && (
|
|
<span className="text-[9px] text-white/40 font-medium">{cat.subtitle}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{cat.hasChevron && (
|
|
<svg viewBox="0 0 24 24" className="size-3.5 fill-white/40"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
|
|
)}
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|