107 lines
4.6 KiB
TypeScript
107 lines
4.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Image from "next/image"
|
|
import { GamingSidebar } from "@/components/games/gaming-sidebar"
|
|
import { GameRow } from "@/components/games/game-row"
|
|
import { GameCard } from "@/components/games/game-card"
|
|
import { Search, Heart, Clock, Star, Zap } from "lucide-react"
|
|
|
|
// Dummy data
|
|
const DUMMY_GAMES = [
|
|
{ id: "s1", title: "Safari Hot 20", image: "https://images.unsplash.com/photo-1546182990-dffeafbe841d?w=400&h=300&fit=crop", provider: "Pragmatic Play" },
|
|
{ id: "s2", title: "Phoenix Hot 20", image: "https://images.unsplash.com/photo-1535223289827-42f1e9919769?w=400&h=300&fit=crop", provider: "Gamzix" },
|
|
{ id: "s3", title: "Habesha Fortune 5", image: "https://images.unsplash.com/photo-1511512578047-dfb367046420?w=400&h=300&fit=crop", provider: "Smartsoft" },
|
|
{ id: "s4", title: "Chicken Road 2.0", image: "https://images.unsplash.com/photo-1518717758536-85ae29035b6d?w=400&h=300&fit=crop", provider: "Smartsoft" },
|
|
{ id: "s5", title: "Hot to Burn", image: "https://images.unsplash.com/photo-1553775282-20af807d920c?w=400&h=300&fit=crop", provider: "Pragmatic Play" },
|
|
{ id: "s6", title: "HydroPlane", image: "https://images.unsplash.com/photo-1567620905732-2d1ec7bb7445?w=400&h=300&fit=crop", provider: "Smartsoft" },
|
|
{ id: "s7", title: "Maneki Win Hard", image: "https://images.unsplash.com/photo-1569154941061-e231b4725ef1?w=400&h=300&fit=crop", provider: "Scribe" },
|
|
]
|
|
|
|
const CATEGORIES = [
|
|
{ id: "search", name: "Search", icon: Search },
|
|
{ id: "popular", name: "Popular Games", icon: Star },
|
|
{ id: "favourites", name: "Favourites", icon: Heart },
|
|
{ id: "recently-played", name: "Recently Played", icon: Clock },
|
|
{ id: "evoplay", name: "Evoplay", icon: Star },
|
|
{ id: "betsoft", name: "Betsoft", icon: Star },
|
|
{ id: "inout", name: "InOUT Games", icon: Star },
|
|
{ id: "scribe", name: "Scribe Games", icon: Star },
|
|
{ id: "pragmatic", name: "Pragmatic", icon: Star },
|
|
{ id: "mancala", name: "Mancala", icon: Star },
|
|
{ id: "spinomenal", name: "Spinomenal", icon: Star },
|
|
{ id: "abracadabra", name: "Abracadabra", icon: Star },
|
|
{ id: "turbo", name: "Turbo Games", icon: Star },
|
|
]
|
|
|
|
const CATEGORIES_DATA = [
|
|
{ id: "popular", title: "Popular Games", games: [...DUMMY_GAMES, ...DUMMY_GAMES, ...DUMMY_GAMES].slice(0, 18) },
|
|
{ id: "evoplay", title: "Evoplay", games: [...DUMMY_GAMES].reverse() },
|
|
{ id: "betsoft", title: "Betsoft", games: DUMMY_GAMES.slice(0, 4) },
|
|
]
|
|
|
|
export default function SpecialGamesPage() {
|
|
const [activeCategory, setActiveCategory] = useState("all")
|
|
|
|
const activeCategoryData = CATEGORIES_DATA.find(c => c.id === activeCategory)
|
|
|
|
return (
|
|
<div className="flex h-[calc(100vh-140px)] overflow-hidden bg-brand-bg">
|
|
<GamingSidebar
|
|
title="Special Games"
|
|
subtitle="Check out our games!"
|
|
activeCategory={activeCategory}
|
|
onCategoryChange={setActiveCategory}
|
|
categories={CATEGORIES}
|
|
/>
|
|
|
|
<main className="flex-1 overflow-y-auto scrollbar-none pb-12">
|
|
<div className="relative w-full aspect-[4/1] md:aspect-[5/1] overflow-hidden">
|
|
<Image
|
|
src="/aviator-bannsser.jpg"
|
|
alt="Special Games Banner"
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-0">
|
|
{activeCategory === "all" ? (
|
|
<div className="flex flex-col">
|
|
{CATEGORIES_DATA.map((category) => (
|
|
<GameRow
|
|
key={category.id}
|
|
title={category.title}
|
|
games={category.games}
|
|
rows={category.id === "popular" ? 3 : 1}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="p-4">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-lg font-bold text-white uppercase border-l-4 border-brand-primary pl-4">
|
|
{activeCategoryData?.title || activeCategory.replace("-", " ")}
|
|
</h2>
|
|
<button
|
|
onClick={() => setActiveCategory("all")}
|
|
className="text-xs text-white/40 hover:text-white uppercase font-bold"
|
|
>
|
|
Back to Special Games
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
|
|
{(activeCategoryData?.games || DUMMY_GAMES).map((game, idx) => (
|
|
<GameCard key={idx} {...game} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|