Tech

Mon, 18 Nov 2024 11:41:35 +0000

import React, { useState } from 'react';

interface Ad {
title: string;
reward: number;
watched: boolean;
}

const WatchAdsToMoney = () => {
const [ads, setAds] = useState<Ad[]>([
{ title: 'Ad 1', reward: 10, watched: false },
{ title: 'Ad 2', reward: 20, watched: false },
{ title: 'Ad 3', reward: 30, watched: false },
]);

const [balance, setBalance] = useState(0);

const handleWatchAd = (index: number) => {
const newAds = [...ads];
newAds[index].watched = true;
setAds(newAds);
setBalance(balance + newAds[index].reward);
};

return (

Watch Ads to Earn Money
Your balance: ${balance}

{ads.map((ad, index) => (

{ad.title}
Reward: ${ad.reward}
<button
className={`mt-2 py-2 px-4 rounded-md ${
ad.watched ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-700 text-white'
}`}
onClick={() => handleWatchAd(index)}
disabled={ad.watched}
>
{ad.watched ? 'Already watched' : 'Watch ad'}


))}


);
};

export default WatchAdsToMoney;