Scribd
Upload
15 views4 pages

appLotoDemo Page - TSX

Te y

Uploaded by

j7mbg8shx5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views4 pages

appLotoDemo Page - TSX

Te y

Uploaded by

j7mbg8shx5
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

'use client'

import { useState, useEffect } from 'react'


import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from
"@/components/ui/card"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
DialogFooter } from "@/components/ui/dialog"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Progress } from "@/components/ui/progress"
import { Bell, Package, Trophy } from 'lucide-react'

// Types
type RaffleType = 'Daily' | 'Weekly' | 'Monthly' | 'Yearly'

interface Raffle {
id: number
type: RaffleType
prize: number
endsIn: string
entries: number
}

interface User {
name: string
avatar: string
entries: { [key in RaffleType]: number }
adsWatched: number
totalEarnings: number
}

// Mock data
const initialRaffles: Raffle[] = [
{ id: 1, type: 'Daily', prize: 100, endsIn: '23:59:59', entries: 0 },
{ id: 2, type: 'Weekly', prize: 500, endsIn: '6 days', entries: 0 },
{ id: 3, type: 'Monthly', prize: 2000, endsIn: '29 days', entries: 0 },
{ id: 4, type: 'Yearly', prize: 10000, endsIn: '11 months', entries: 0 },
]

const initialUser: User = {


name: 'John Doe',
avatar: '/placeholder.svg?height=40&width=40',
entries: { Daily: 0, Weekly: 0, Monthly: 0, Yearly: 0 },
adsWatched: 0,
totalEarnings: 0,
}

export default function Home() {


const [raffles, setRaffles] = useState<Raffle[]>(initialRaffles)
const [user, setUser] = useState<User>(initialUser)
const [selectedRaffle, setSelectedRaffle] = useState<Raffle | null>(null)
const [isWatchingAd, setIsWatchingAd] = useState(false)
const [adProgress, setAdProgress] = useState(0)

useEffect(() => {
if (isWatchingAd) {
const timer = setInterval(() => {
setAdProgress((prevProgress) => {
if (prevProgress >= 100) {
clearInterval(timer)
setIsWatchingAd(false)
handleAdComplete()
return 0
}
return prevProgress + 10
})
}, 500)
return () => clearInterval(timer)
}
}, [isWatchingAd])

const handleAdComplete = () => {


if (selectedRaffle) {
setUser((prevUser) => ({
...prevUser,
entries: {
...prevUser.entries,
[selectedRaffle.type]: prevUser.entries[selectedRaffle.type] + 1
},
adsWatched: prevUser.adsWatched + 1,
totalEarnings: prevUser.totalEarnings + 0.1 // Assume $0.10 per ad watched
}))
setRaffles((prevRaffles) =>
prevRaffles.map((raffle) =>
raffle.id === selectedRaffle.id
? { ...raffle, entries: raffle.entries + 1 }
: raffle
)
)
}
}

return (
<div className="container mx-auto px-4 py-8">
<header className="flex justify-between items-center mb-8">
<h1 className="text-4xl font-bold">AdRaffle</h1>
<div className="flex items-center space-x-4">
<Button variant="ghost" size="icon">
<Bell className="h-5 w-5" />
<span className="sr-only">Notifications</span>
</Button>
<Avatar>
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
</Avatar>
</div>
</header>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">


<section className="md:col-span-2 space-y-6">
<h2 className="text-2xl font-semibold">Available Raffles</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{raffles.map((raffle) => (
<Card key={raffle.id}>
<CardHeader>
<CardTitle>{raffle.type} Raffle</CardTitle>
</CardHeader>
<CardContent>
<p className="text-2xl font-bold">$
{raffle.prize.toLocaleString()}</p>
<p className="text-muted-foreground">Ends in: {raffle.endsIn}</p>
<p className="text-sm mt-2">Your entries:
{user.entries[raffle.type]}</p>
<p className="text-sm">Total entries: {raffle.entries}</p>
</CardContent>
<CardFooter>
<Button className="w-full" onClick={() => {
setSelectedRaffle(raffle)
setIsWatchingAd(true)
}}>
Watch Ad to Enter
</Button>
</CardFooter>
</Card>
))}
</div>
</section>

<aside>
<Card>
<CardHeader>
<CardTitle>Your Profile</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center space-x-4">
<Avatar>
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
</Avatar>
<div>
<p className="font-semibold">{user.name}</p>
<p className="text-sm text-muted-foreground">Member since
2023</p>
</div>
</div>
<div className="space-y-2">
<div className="flex justify-between">
<span className="flex items-center">
<Package className="mr-2 h-4 w-4" />
Ads Watched
</span>
<span>{user.adsWatched}</span>
</div>
<div className="flex justify-between">
<span className="flex items-center">
<Trophy className="mr-2 h-4 w-4" />
Total Earnings
</span>
<span>${user.totalEarnings.toFixed(2)}</span>
</div>
</div>
</CardContent>
</Card>
</aside>
</div>

<Dialog open={isWatchingAd} onOpenChange={setIsWatchingAd}>


<DialogContent>
<DialogHeader>
<DialogTitle>Watching Ad</DialogTitle>
<DialogDescription>
Please watch the entire ad to receive your raffle entry.
</DialogDescription>
</DialogHeader>
<div className="py-4">
<Progress value={adProgress} className="w-full" />
</div>
<DialogFooter>
<Button disabled={adProgress < 100} onClick={() =>
setIsWatchingAd(false)}>
{adProgress < 100 ? 'Watching...' : 'Close'}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
)
}

You might also like