Skip to content

S
sweepstake
Commit 0a43d070 by Arjun Jhukal
Options

updated game list at dashboard

parent 57a1c785
Showing with 174 additions and 128 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>;
}, }
];
return (
<>
export default function Home() { <Dashboard />
const [current, setCurrent] = useState(0);
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 */} <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 2xl:grid-cols-5 mb-8">
<div className="absolute bottom-[-24px] left-1/2 -translate-x-1/2 flex gap-2"> {
{slides.map((_, i) => ( games?.data?.data.map((game) => (
<button <ProtectedLink href={`exclusive-games/${game.id}`} key={game.id} className="col-span-1 " >
key={i} <div className="flex items-center gap-3 py-2 px-6" style={
onClick={() => setCurrent(i)} {
className={`h-[8px] p-0 ${ borderRadius: "24px",
i === current ? "bg-white w-[24px]" : "bg-gray-400 w-[8px]" background: "rgba(255, 255, 255, 0.10)",
}`} }
/> }>
))} <Image
</div> src={game.thumbnail || "/assets/images/fallback.png"}
</div> 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>
</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"> <h1
<h1 className="text-[40px] mb-[8px]"
className="text-[40px] mb-[8px]" style={{
style={{ color: "#FBD230",
color: "#FBD230", lineHeight: "96%",
lineHeight: "96%", letterSpacing: "-0.682px",
letterSpacing: "-0.682px", }}>
}}> Welcome BONUS!!
Welcome BONUS!! </h1>
</h1> <p
<p className="text-[13px] mb-[12px]"
className="text-[13px] mb-[12px]" style={{ lineHeight: "120%", color: "#FBD230" }}>
style={{ lineHeight: "120%", color: "#FBD230" }}> 10$ on first play.
10$ on first play. </p>
</p> <a
<a href="#"
href="#" className="px-[18px] py-[11px] rounded-[28px]"
className="px-[18px] py-[11px] rounded-[28px]" style={{
style={{ background:
background: "linear-gradient(270deg, #F9B901 0.09%, #D09F12 95.19%)",
"linear-gradient(270deg, #F9B901 0.09%, #D09F12 95.19%)", }}>
}}> Play Now
Play Now </a>
</a> </div>
</div> <div className="dashboard-card-img aspect-[245/245]">
<div className="dashboard-card-img "> <img src="/assets/images/card1.png" alt="" className="h-auto max-w-full" />
<img src="/assets/images/card1.png" alt="" /> </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={{ background: "rgba(255, 255, 255, 0.10)",
maxWidth: "520px", }}>
background: "rgba(255, 255, 255, 0.10)", <div className="py-[45px] gap-6">
}}> <h1
<div className="py-[45px] gap-6"> className="text-[40px] mb-[10px]"
<h1 style={{
className="text-[40px] mb-[10px]" color: "#1AF7FE",
style={{ letterSpacing: "-0.682px",
color: "#1AF7FE", lineHeight: "96%",
letterSpacing: "-0.682px", }}>
lineHeight: "96%", Easy.Set.Play
}}> </h1>
Easy.Set.Play <p
</h1> className="text-[13px] mb-[12px]"
<p style={{ color: "#E7BCFE", lineHeight: "120%" }}>
className="text-[13px] mb-[12px]" Join the Fun today.
style={{ color: "#E7BCFE", lineHeight: "120%" }}> </p>
Join the Fun today. <a
</p> href="#"
<a className="px-[18px] py-[11px] rounded-[28px]"
href="#" style={{
className="px-[18px] py-[11px] rounded-[28px]" background:
style={{ "linear-gradient(270deg, #D620D9 0.09%, #B40EF0 95.19%)",
background: }}>
"linear-gradient(270deg, #D620D9 0.09%, #B40EF0 95.19%)", Play Now
}}> </a>
Play Now </div>
</a> <div className="dashboard-card-img w-[204px] h-[204px]">
</div> <img src="/assets/images/card2.png" alt="" />
<div className="dashboard-card-img w-[204px] h-[204px]"> </div>
<img src="/assets/images/card2.png" alt="" /> </div>
</div> </div>
</div> </>
</div> );
</>
);
} }
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