Skip to content

S
sweepstake
Commit 41097315 by Arjun Jhukal
Options

updated the banner code to handle error more effieicently

parent f8ad2c84
Showing with 150 additions and 168 deletions
src/app/(dashboard)/(user)/(outsideAuth)/page.tsx
...@@ -2,221 +2,203 @@ import Dashboard from "@/components/pages/dashboard"; ...@@ -2,221 +2,203 @@ import Dashboard from "@/components/pages/dashboard";
import UspSlider from "@/components/pages/dashboard/UspSlider"; import UspSlider from "@/components/pages/dashboard/UspSlider";
import ProtectedLink from "@/routes/ProtectedLink"; import ProtectedLink from "@/routes/ProtectedLink";
import { getAllGames, getSubGames, getUsp } from "@/serverApi/game"; import { getAllGames, getSubGames, getUsp } from "@/serverApi/game";
import { Tooltip } from "@mui/material";
import Image from "next/image";
import DashboardProvider from "./DashboardProvider";
import { getBanners, getSubBanners } from "@/serverApi/pages"; import { getBanners, getSubBanners } from "@/serverApi/pages";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import DashboardProvider from "./DashboardProvider";
export default async function Home() { export default async function Home() {
let games = null; let games = null;
let gamesError = null;
let usps = null; let usps = null;
let uspError = null;
let subGames = null; let subGames = null;
let subGamesError = null;
let banners = null; let banners = null;
let bannersError = null;
let subBanners = null; let subBanners = null;
let subBannersError = null;
// Fetch everything individually
try { try {
games = await getAllGames(); games = await getAllGames();
} catch (err) { } catch (err) {
console.log("❌ Failed to fetch games:", err); console.error("❌ Failed to fetch games:", err);
return <p className="text-red-500">Failed to load games.</p>; gamesError = "Failed to load games.";
}
if (!games?.data?.data || !Array.isArray(games.data.data)) {
return <p className="text-gray-500">No games found.</p>;
} }
try { try {
usps = await getUsp(); usps = await getUsp();
} catch (err) { } catch (err) {
console.log("❌ Failed to fetch games:", err); console.error("❌ Failed to fetch USP:", err);
return <p className="text-red-500">Failed to load games.</p>; uspError = "Failed to load USPs.";
} }
try { try {
subGames = await getSubGames(); subGames = await getSubGames();
} catch (err) { } catch (err) {
console.log("❌ Failed to fetch games:", err); console.error("❌ Failed to fetch sub games:", err);
return <p className="text-red-500">Failed to load games.</p>; subGamesError = "Failed to load trending games.";
} }
try { try {
banners = await getBanners(); banners = await getBanners();
} catch (err) { } catch (err) {
console.log("❌ Failed to fetch banner:", err); console.error("❌ Failed to fetch banners:", err);
return <p className="text-red-500">Failed to load banner.</p>; bannersError = "Failed to load banners.";
} }
try { try {
subBanners = await getSubBanners(); subBanners = await getSubBanners();
} catch (err) { } catch (err) {
console.log("❌ Failed to fetch sub banner:", err); console.error("❌ Failed to fetch sub banners:", err);
return <p className="text-red-500">Failed to load sub banner.</p>; subBannersError = "Failed to load sub banners.";
} }
// console.log({ subGames: subGames.data, usps })
return ( return (
<DashboardProvider> <DashboardProvider>
<> <>
{banners?.data.length ? {/* Banners */}
<Dashboard slides={banners.data} /> : ""} {bannersError ? (
<p className="text-red-500">{bannersError}</p>
) : banners?.data?.length ? (
<Dashboard slides={banners.data} />
) : null}
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 2xl:grid-cols-5 mb-8"> {/* Games */}
{games?.data?.data.map((game) => ( {gamesError ? (
<ProtectedLink <p className="text-red-500">{gamesError}</p>
href={`exclusive-games/${game.id}`} ) : games?.data?.data?.length ? (
key={game.id} <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 2xl:grid-cols-5 mb-8">
className="col-span-1 "> {games.data.data.map((game) => (
<div
className="flex items-center gap-3 py-2 px-6"
style={{
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>
</ProtectedLink>
))}
</div>
<section className="trending__games">
<h2 className="text-[14px] mb-4">Top 10 Trending Games</h2>
<div className="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-5 2xl:grid-cols-6 mb-8">
{subGames?.data?.map((game: any) => (
<ProtectedLink <ProtectedLink
href={`exclusive-games/${game.id}`} href={`exclusive-games/${game.id}`}
key={game.name} key={game.id}
className="col-span-1 relative aspect-[1/1]"> className="col-span-1 "
<Image >
src={game.image_url || "/assets/images/fallback.png"}
alt={game.name || ""}
fill
className=" rounded-[24px] lg:rounded-[32px] object-cover group-hover:scale-105 transition-transform duration-300 "
/>
</ProtectedLink>
))}
</div>
</section>
{subBanners?.data.length ?
<div className="dashboard-card-wrapper grid grid-cols-2 gap-5 justify-center">
{subBanners?.data?.length > 0 &&
subBanners.data.map((subBanner, index) => (
<div <div
key={subBanner.name || index} className="flex items-center gap-3 py-2 px-6"
className="dashboard-card1 flex justify-between px-10 gap-2 rounded-[24px]"
style={{ style={{
background: borderRadius: "24px",
index % 2 === 0 background: "rgba(255, 255, 255, 0.10)",
? "rgba(255, 255, 255, 0.10)"
: "rgba(255, 255, 255, 0.20)",
}} }}
> >
<div className="py-7 gap-6"> <Image
{/* ✅ Render title if available */} src={game.thumbnail || "/assets/images/fallback.png"}
{subBanner?.name && ( alt={game.name}
<h1 width={74}
className="text-[40px] mb-[8px]" height={74}
style={{ className="aspect-[1/1] object-cover group-hover:scale-105 transition-transform duration-300 rounded-full"
color: "#FBD230", />
lineHeight: "96%", <strong className="text-[14px]">{game.name}</strong>
letterSpacing: "-0.682px", </div>
}} </ProtectedLink>
> ))}
{subBanner.name} </div>
</h1> ) : (
)} <p className="text-gray-500">No games found.</p>
)}
{/* ✅ Render description if available */}
{subBanner?.description && (
<p
className="text-[13px] mb-[12px]"
style={{ lineHeight: "120%", color: "#FBD230" }}
>
{subBanner.description}
</p>
)}
{/* ✅ Render CTA button if link exists */} {/* Trending Games */}
{subBanner?.cta_link && ( <section className="trending__games">
<Link <h2 className="text-[14px] mb-4">Top 10 Trending Games</h2>
href={subBanner.cta_link} {subGamesError ? (
className="px-[18px] py-[11px] rounded-[28px] inline-block" <p className="text-red-500">{subGamesError}</p>
style={{ ) : (
background: <div className="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-5 2xl:grid-cols-6 mb-8">
index % 2 === 0 {subGames?.data?.map((game: any) => (
? "linear-gradient(270deg, #D620D9 0.09%, #B40EF0 95.19%)" <ProtectedLink
: "linear-gradient(270deg, #F9B901 0.09%, #D09F12 95.19%)", href={`exclusive-games/${game.id}`}
}} key={game.name}
target="_blank" className="col-span-1 relative aspect-[1/1]"
> >
Play Now <Image
</Link> src={game.image_url || "/assets/images/fallback.png"}
)} alt={game.name || ""}
</div> fill
className="rounded-[24px] lg:rounded-[32px] object-cover group-hover:scale-105 transition-transform duration-300"
/>
</ProtectedLink>
))}
</div>
)}
</section>
{/* ✅ Render image only if available */} {/* Sub Banners */}
{subBanner?.image_url && ( {subBannersError ? (
<div className="dashboard-card-img aspect-[245/245]"> <p className="text-red-500">{subBannersError}</p>
<Image ) : subBanners?.data?.length ? (
src={subBanner.image_url} <div className="dashboard-card-wrapper grid grid-cols-2 gap-5 justify-center">
alt={subBanner.name || "Sub Banner"} {subBanners.data.map((subBanner, index) => (
className="h-auto max-w-full" <div
width={245} key={subBanner.name || index}
height={245} className="dashboard-card1 flex justify-between px-10 gap-2 rounded-[24px]"
/> style={{
</div> background:
index % 2 === 0
? "rgba(255, 255, 255, 0.10)"
: "rgba(255, 255, 255, 0.20)",
}}
>
<div className="py-7 gap-6">
{subBanner.name && (
<h1
className="text-[40px] mb-[8px]"
style={{
color: "#FBD230",
lineHeight: "96%",
letterSpacing: "-0.682px",
}}
>
{subBanner.name}
</h1>
)}
{subBanner.description && (
<p
className="text-[13px] mb-[12px]"
style={{ lineHeight: "120%", color: "#FBD230" }}
>
{subBanner.description}
</p>
)}
{subBanner.cta_link && (
<Link
href={subBanner.cta_link}
className="px-[18px] py-[11px] rounded-[28px] inline-block"
style={{
background:
index % 2 === 0
? "linear-gradient(270deg, #D620D9 0.09%, #B40EF0 95.19%)"
: "linear-gradient(270deg, #F9B901 0.09%, #D09F12 95.19%)",
}}
target="_blank"
>
Play Now
</Link>
)} )}
</div> </div>
))} {subBanner.image_url && (
<div className="dashboard-card-img aspect-[245/245]">
{/* <div <Image
className="dashboard-card2 flex px-[45px] gap-2 rounded-[24px]" src={subBanner.image_url}
style={{ alt={subBanner.name || "Sub Banner"}
background: "rgba(255, 255, 255, 0.10)", className="h-auto max-w-full"
}}> width={245}
<div className="py-[45px] gap-6"> height={245}
<h1 />
className="text-[40px] mb-[10px]" </div>
style={{ )}
color: "#1AF7FE",
letterSpacing: "-0.682px",
lineHeight: "96%",
}}>
Easy.Set.Play
</h1>
<p
className="text-[13px] mb-[12px]"
style={{ color: "#E7BCFE", lineHeight: "120%" }}>
Join the Fun today.
</p>
<a
href="#"
className="px-[18px] py-[11px] rounded-[28px] inline-block"
style={{
background:
"linear-gradient(270deg, #D620D9 0.09%, #B40EF0 95.19%)",
}}>
Play Now
</a>
</div>
<div className="dashboard-card-img ">
<img
src="/assets/images/card2.png"
alt=""
// className="w-[245px] h-[245px]"
className="h-auto max-w-full "
style={{ width: "245px", height: "245px" }}
/>
</div> </div>
</div> */} ))}
</div> : null} </div>
<UspSlider uspData={usps.data || []} /> ) : null}
{/* USP Slider */}
{uspError ? (
<p className="text-red-500">{uspError}</p>
) : (
<UspSlider uspData={usps?.data || []} />
)}
</> </>
</DashboardProvider> </DashboardProvider>
); );
......
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