Skip to content

S
sweepstake
Commit 0a43d070 by Arjun Jhukal
Options

updated game list at dashboard

parent 57a1c785
Showing with 101 additions and 55 deletions
src/app/(dashboard)/(user)/(outsideAuth)/exclusive-games/page.tsx
...@@ -2,9 +2,8 @@ import ExclusiveGamePage from '@/components/pages/dashboard/userDashboard/games/ ...@@ -2,9 +2,8 @@ import ExclusiveGamePage from '@/components/pages/dashboard/userDashboard/games/
import React from 'react' import React from 'react'
export default function ExclusiveGames() { export default function ExclusiveGames() {
return ( return (
<ExclusiveGamePage /> <ExclusiveGamePage />
) )
} }
src/app/(dashboard)/(user)/(outsideAuth)/page.tsx
"use client"; import Dashboard from "@/components/pages/dashboard";
import ProtectedLink from "@/routes/ProtectedLink";
import { getAllGames } from "@/serverApi/game";
import { Tooltip } from "@mui/material";
import Image from "next/image"; import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";
const slides = [ export default async function Home() {
{ let games = null;
id: 1,
image: "/assets/images/slider1.png", try {
}, games = await getAllGames();
{ } catch (err) {
id: 2, console.log("❌ Failed to fetch games:", err);
image: "/assets/images/slider2.jpg", return <p className="text-red-500">Failed to load games.</p>;
}, }
{
id: 3, if (!games?.data?.data || !Array.isArray(games.data.data)) {
image: "/assets/images/slider1.png", return <p className="text-gray-500">No games found.</p>;
}, }
];
export default function Home() {
const [current, setCurrent] = useState(0);
return ( return (
<> <>
{/* <h1>Dashboard Root</h1> */}
<div className="dashboard__root relative w-full max-w-6xl mx-auto rounded-2xl mb-32">
<div className="relative h-[240px] w-full overflow-hidden rounded-[50px]">
<AnimatePresence mode="wait">
<motion.img
key={slides[current].id}
src={slides[current].image}
alt={`slide-${slides[current].id}`}
initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -100 }}
transition={{ duration: 0.6 }}
className="absolute inset-0 w-full h-full object-cover rounded-2xl"
/>
</AnimatePresence>
</div>
{/* Dots */} <Dashboard />
<div className="absolute bottom-[-24px] left-1/2 -translate-x-1/2 flex gap-2">
{slides.map((_, i) => ( <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 2xl:grid-cols-5 mb-8">
<button {
key={i} games?.data?.data.map((game) => (
onClick={() => setCurrent(i)} <ProtectedLink href={`exclusive-games/${game.id}`} key={game.id} className="col-span-1 " >
className={`h-[8px] p-0 ${ <div className="flex items-center gap-3 py-2 px-6" style={
i === current ? "bg-white w-[24px]" : "bg-gray-400 w-[8px]" {
}`} borderRadius: "24px",
background: "rgba(255, 255, 255, 0.10)",
}
}>
<Image
src={game.thumbnail || "/assets/images/fallback.png"}
alt={game.name}
width={74}
height={74}
className="aspect-[1/1] object-cover group-hover:scale-105 transition-transform duration-300 rounded-full"
/> />
))} <strong className="text-[14px]">{game?.name} </strong>
</div>
</div> </div>
</ProtectedLink>
))
}
</div >
<div className="dashboard-card-wrapper flex flex-wrap gap-5 justify-center"> <div className="dashboard-card-wrapper grid grid-cols-2 gap-5 justify-center">
<div <div
className="dashboard-card1 flex px-10 gap-2 rounded-[24px]" className="dashboard-card1 flex px-10 gap-2 rounded-[24px]"
style={{ style={{
maxWidth: "520px",
background: "rgba(255, 255, 255, 0.20)", background: "rgba(255, 255, 255, 0.20)",
}}> }}>
<div className="py-7 gap-6"> <div className="py-7 gap-6">
...@@ -86,14 +79,13 @@ export default function Home() { ...@@ -86,14 +79,13 @@ export default function Home() {
Play Now Play Now
</a> </a>
</div> </div>
<div className="dashboard-card-img "> <div className="dashboard-card-img aspect-[245/245]">
<img src="/assets/images/card1.png" alt="" /> <img src="/assets/images/card1.png" alt="" className="h-auto max-w-full" />
</div> </div>
</div> </div>
<div <div
className="dashboard-card2 flex px-[45px] gap-2 rounded-[24px]" className="dashboard-card2 flex px-[45px] gap-2 rounded-[24px]"
style={{ style={{
maxWidth: "520px",
background: "rgba(255, 255, 255, 0.10)", background: "rgba(255, 255, 255, 0.10)",
}}> }}>
<div className="py-[45px] gap-6"> <div className="py-[45px] gap-6">
......
src/components/pages/dashboard/adminDashboard/players/playerDetail/index.tsx
...@@ -147,7 +147,7 @@ export default function PlayerDetailPage() { ...@@ -147,7 +147,7 @@ export default function PlayerDetailPage() {
</div> </div>
</section> </section>
<GameTransactionTable /> {/* <GameTransactionTable /> */}
</> </>
) )
} }
src/components/pages/dashboard/index.tsx 0 → 100644
"use client";
import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";
const slides = [
{
id: 1,
image: "/assets/images/slider1.png",
},
{
id: 2,
image: "/assets/images/slider2.jpg",
},
{
id: 3,
image: "/assets/images/slider1.png",
},
];
export default function Dashboard() {
const [current, setCurrent] = useState(0);
return (
<div className="dashboard__root relative w-full mx-auto rounded-2xl mb-8">
<div className="relative h-[240px] w-full overflow-hidden rounded-[50px]">
<AnimatePresence mode="wait">
<motion.img
key={slides[current].id}
src={slides[current].image}
alt={`slide-${slides[current].id}`}
initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -100 }}
transition={{ duration: 0.6 }}
className="absolute inset-0 w-full h-full object-cover rounded-2xl"
/>
</AnimatePresence>
</div>
{/* Dots */}
<div className="absolute bottom-[-24px] left-1/2 -translate-x-1/2 flex gap-2">
{slides.map((_, i) => (
<button
key={i}
onClick={() => setCurrent(i)}
className={`h-[8px] p-0 ${i === current ? "bg-white w-[24px]" : "bg-gray-400 w-[8px]"
}`}
/>
))}
</div>
</div>
)
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment