Skip to content

Commit c18babf

Browse files
diegocmaiadiegocmaia
committed
Add HouseAds component
1 parent 92d7350 commit c18babf

3 files changed

Lines changed: 159 additions & 6 deletions

File tree

‎apps/web/src/components/house-ad.tsx‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import { useAuth } from "@/context/auth-context";
2+
import { cn } from "@/lib/utils";
3+
import { Link } from "@tanstack/react-router";
4+
import { Gift, TrendingDown, Trophy } from "lucide-react";
5+
6+
interface HouseAdProps {
7+
variant: "banner" | "tower";
8+
className?: string;
9+
}
10+
11+
export function HouseAd({ variant, className }: HouseAdProps) {
12+
const { user, isPending } = useAuth();
13+
14+
if (isPending) {
15+
return (
16+
<div
17+
className={cn(
18+
"animate-pulse rounded bg-[#1a1a1a]",
19+
variant === "banner" ? "h-[90px] w-full" : "h-[600px] w-full",
20+
className
21+
)}
22+
/>
23+
);
24+
}
25+
26+
if (!user) {
27+
return <SignUpAd variant={variant} className={className} />;
28+
}
29+
30+
return <LoggedInAd variant={variant} className={className} />;
31+
}
32+
33+
function SignUpAd({ variant, className }: { variant: "banner" | "tower"; className?: string }) {
34+
if (variant === "banner") {
35+
return (
36+
<Link
37+
to="/signup"
38+
className={cn(
39+
"flex h-[90px] w-full items-center gap-3 rounded border border-[#2a2a2a] bg-gradient-to-r from-[#1a1a1a] to-[#1e1e1e] px-4 transition-colors hover:border-yellow-500/40",
40+
className
41+
)}
42+
>
43+
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-yellow-400/10">
44+
<Trophy className="h-5 w-5 text-yellow-400" />
45+
</div>
46+
<div className="min-w-0 flex-1">
47+
<p className="text-xs font-bold text-white">Play risk-free</p>
48+
<p className="text-[11px] text-[#7090b0]">Start with 1,000 free NoCoins</p>
49+
</div>
50+
<span className="shrink-0 rounded bg-yellow-400 px-2.5 py-1 text-[11px] font-bold text-black">
51+
Sign up
52+
</span>
53+
</Link>
54+
);
55+
}
56+
57+
return (
58+
<div
59+
className={cn(
60+
"flex h-[600px] w-full flex-col items-center justify-center gap-4 rounded border border-[#2a2a2a] bg-[#161616] px-4 py-6 text-center",
61+
className
62+
)}
63+
>
64+
<div className="flex h-14 w-14 items-center justify-center rounded-full bg-yellow-400/10">
65+
<Trophy className="h-7 w-7 text-yellow-400" />
66+
</div>
67+
<div className="space-y-1.5">
68+
<p className="text-sm font-bold leading-snug text-white">Play risk-free</p>
69+
<p className="text-[11px] leading-relaxed text-[#7090b0]">
70+
No real money.
71+
<br />
72+
Just the thrill of the game.
73+
</p>
74+
</div>
75+
<div className="space-y-1 text-center">
76+
<p className="text-2xl font-bold text-yellow-400">1,000</p>
77+
<p className="text-[11px] text-[#7090b0]">NoCoins on sign up</p>
78+
</div>
79+
<Link
80+
to="/signup"
81+
className="mt-2 w-full rounded bg-yellow-400 py-2 text-center text-xs font-bold text-black transition-colors hover:bg-yellow-300"
82+
>
83+
Create free account
84+
</Link>
85+
<p className="text-[10px] text-[#444]">No deposits · No risk</p>
86+
</div>
87+
);
88+
}
89+
90+
function LoggedInAd({ variant, className }: { variant: "banner" | "tower"; className?: string }) {
91+
if (variant === "banner") {
92+
return (
93+
<Link
94+
to="/rewards"
95+
className={cn(
96+
"flex h-[90px] w-full items-center gap-3 rounded border border-[#2a2a2a] bg-gradient-to-r from-[#1a1a1a] to-[#1e1e1e] px-4 transition-colors hover:border-yellow-500/40",
97+
className
98+
)}
99+
>
100+
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-yellow-400/10">
101+
<Gift className="h-5 w-5 text-yellow-400" />
102+
</div>
103+
<div className="min-w-0 flex-1">
104+
<p className="text-xs font-bold text-white">Rewards shop</p>
105+
<p className="text-[11px] text-[#7090b0]">Redeem your NoCoins for real prizes</p>
106+
</div>
107+
<span className="shrink-0 rounded border border-yellow-400/30 bg-yellow-400/10 px-2.5 py-1 text-[11px] font-bold text-yellow-400">
108+
Browse →
109+
</span>
110+
</Link>
111+
);
112+
}
113+
114+
return (
115+
<div className={cn("flex h-[600px] w-full flex-col gap-3", className)}>
116+
<Link
117+
to="/rewards"
118+
className="flex flex-1 flex-col items-center justify-center gap-3 rounded border border-[#2a2a2a] bg-[#161616] px-4 py-5 text-center transition-colors hover:border-yellow-500/40"
119+
>
120+
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-yellow-400/10">
121+
<Gift className="h-6 w-6 text-yellow-400" />
122+
</div>
123+
<div className="space-y-1">
124+
<p className="text-xs font-bold text-white">Rewards Shop</p>
125+
<p className="text-[11px] leading-relaxed text-[#7090b0]">
126+
Trade your NoCoins for real prizes and discounts
127+
</p>
128+
</div>
129+
<span className="rounded bg-yellow-400 px-3 py-1.5 text-[11px] font-bold text-black">
130+
Browse rewards
131+
</span>
132+
</Link>
133+
134+
<Link
135+
to="/dashboard"
136+
className="flex flex-1 flex-col items-center justify-center gap-3 rounded border border-[#2a2a2a] bg-[#161616] px-4 py-5 text-center transition-colors hover:border-blue-500/30"
137+
>
138+
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-blue-400/10">
139+
<TrendingDown className="h-6 w-6 text-blue-400" />
140+
</div>
141+
<div className="space-y-1">
142+
<p className="text-xs font-bold text-white">Your Stats</p>
143+
<p className="text-[11px] leading-relaxed text-[#7090b0]">
144+
See how much you've avoided losing by not betting for real
145+
</p>
146+
</div>
147+
<span className="rounded border border-blue-400/30 bg-blue-400/10 px-3 py-1.5 text-[11px] font-bold text-blue-400">
148+
View dashboard
149+
</span>
150+
</Link>
151+
</div>
152+
);
153+
}

‎apps/web/src/routes/__root.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Outlet, createRootRoute } from "@tanstack/react-router";
22
import { useState } from "react";
3-
import { AdPlaceholder } from "../components/ad-placeholder";
43
import { BetSlip } from "../components/betting/bet-slip";
54
import { BottomNav } from "../components/betting/bottom-nav";
65
import { SportsSidebar } from "../components/betting/sports-sidebar";
76
import { ErrorBoundary } from "../components/error-boundary";
7+
import { HouseAd } from "../components/house-ad";
88
import { Footer, Header } from "../components/layout";
99
import { Sheet, SheetContent } from "../components/ui/sheet";
1010
import { AuthProvider } from "../context/auth-context";
@@ -23,7 +23,7 @@ function AppLayout() {
2323
<div className="flex flex-1 overflow-hidden">
2424
{/* [AD TOWER LEFT] xl only — stays visible while main scrolls */}
2525
<aside className="hidden xl:flex w-44 shrink-0 flex-col border-r border-[#2a2a2a] bg-[#141414] px-3 pt-6">
26-
<AdPlaceholder label="160×600" className="w-full" height="600px" />
26+
<HouseAd variant="tower" className="w-full" />
2727
</aside>
2828

2929
{/* Desktop sports sidebar */}
@@ -48,7 +48,7 @@ function AppLayout() {
4848

4949
{/* [AD TOWER RIGHT] xl only — stays visible while main scrolls */}
5050
<aside className="hidden xl:flex w-44 shrink-0 flex-col border-l border-[#2a2a2a] bg-[#141414] px-3 pt-6">
51-
<AdPlaceholder label="160×600" className="w-full" height="600px" />
51+
<HouseAd variant="tower" className="w-full" />
5252
</aside>
5353
</div>
5454

‎apps/web/src/routes/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { createFileRoute } from "@tanstack/react-router";
22
import { ChevronRight, Radio, Star, TrendingUp } from "lucide-react";
3-
import { AdPlaceholder } from "../components/ad-placeholder";
43
import { FeaturedBanner } from "../components/betting/featured-banner";
54
import { MatchCard } from "../components/betting/match-card";
5+
import { HouseAd } from "../components/house-ad";
66
import { Badge } from "../components/ui/badge";
77
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
88
import { FEATURED_MATCHES, LIVE_MATCHES, UPCOMING_MATCHES } from "../data/mock-matches";
@@ -204,7 +204,7 @@ function AllContent({
204204

205205
{/* [AD SPOT 1 — mobile only] Between Live Now and Popular */}
206206
<div className="px-3 py-3 lg:hidden">
207-
<AdPlaceholder label="320×90" className="w-full rounded" height="90px" />
207+
<HouseAd variant="banner" className="w-full" />
208208
</div>
209209

210210
{/* Popular Section */}
@@ -221,7 +221,7 @@ function AllContent({
221221

222222
{/* [AD SPOT 2 — mobile only] Between Popular and Top Football */}
223223
<div className="px-3 py-3 lg:hidden">
224-
<AdPlaceholder label="320×90" className="w-full rounded" height="90px" />
224+
<HouseAd variant="banner" className="w-full" />
225225
</div>
226226

227227
{/* Featured Football Section */}

0 commit comments

Comments
 (0)