EdiFarcas/Giveaway-app
1
0
Fork 0
mirror of https://github.com/EdiFarcas/Giveaway-app.git synced 2026-06-22 07:00:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

Small update

Browse Source
This commit is contained in:
Alexandru Eduard Farcas
2025-05-05 02:54:38 +03:00
parent 8bdf2b40c2
commit 945758e879
2 changed files with 36 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/giveaways/page.tsx
+2
View File
@@ -18,6 +18,7 @@ export default async function GiveawaysPage() {
title: true, title: true,
description: true, description: true,
prize: true, prize: true,
value: true,
endsAt: true, endsAt: true,
}, },
}); });
@@ -62,6 +63,7 @@ export default async function GiveawaysPage() {
title={giveaway.title} title={giveaway.title}
description={`${giveaway.description} — 🕒 ${countdownText}`} description={`${giveaway.description} — 🕒 ${countdownText}`}
imageUrl={giveaway.prize} imageUrl={giveaway.prize}
value={giveaway.value}
/> />
</div> </div>
); );
src/components/GiveawayCard.tsx
+34 -20
View File
@@ -5,14 +5,19 @@ interface GiveawayCardProps {
title: string; title: string;
description: string; description: string;
imageUrl: string; imageUrl: string;
value: number;
} }
const GiveawayCard: React.FC<GiveawayCardProps> = ({ title, description, imageUrl }) => { const GiveawayCard: React.FC<GiveawayCardProps> = ({ title, description, imageUrl, value }) => {
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const handleEnterClick = () => { const handleEnterClick = () => {
// Logic to enter the giveaway const activeUserCoins = 300; // Replace with actual logic to fetch active user's coins (TO DO LATER)
setIsModalOpen(true); if (activeUserCoins >= value) {
setIsModalOpen(true);
} else {
alert("You do not have enough coins to enter this giveaway.");
}
}; };
const handleCloseModal = () => { const handleCloseModal = () => {
@@ -22,35 +27,44 @@ const GiveawayCard: React.FC<GiveawayCardProps> = ({ title, description, imageUr
return ( return (
<div> <div>
<div className="bg-white shadow-md rounded-lg overflow-hidden flex"> <div className="bg-white shadow-md rounded-lg overflow-hidden flex">
<div className="p-4 flex-1"> <div className="p-4 flex-1">
<h3 className="text-lg font-bold mb-2">{title}</h3> <h3 className="text-lg font-bold mb-2">{title}</h3>
<p className="text-gray-600 text-sm">{description}</p> <p className="text-gray-600 text-sm">{description}</p>
</div> <p className="text-gray-600 text-sm mt-2">Value: {value} coins</p>
<div className="p-4 flex items-center"> </div>
<button <div className="p-4 flex items-center">
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" <button
onClick={handleEnterClick} className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
> onClick={handleEnterClick}
Enter >
</button> Enter
</div> </button>
</div>
</div> </div>
{/* Modal */} {/* Modal */}
{isModalOpen && ( {isModalOpen && (
<div className="fixed inset-0 bg-opacity-50 backdrop-blur-sm z-50 flex justify-center items-center"> <div className="fixed inset-0 bg-opacity-50 backdrop-blur-sm z-50 flex justify-center items-center">
<div className="bg-white p-6 rounded-lg shadow-lg w-96"> <div className="bg-white p-6 rounded-lg shadow-lg w-96 relative">
<h2 className="text-xl font-bold mb-4">{title}</h2> <h2 className="text-xl font-bold mb-4">{title}</h2>
<p className="text-gray-600 mb-4">{description}</p> <p className="text-gray-600 mb-4">{description}</p>
<img src={imageUrl} alt={title} className="w-full h-48 object-cover mb-4" /> <img src={imageUrl} alt={title} className="w-full h-48 object-cover mb-4" />
<div className="flex justify-between mt-4 text-black">
<button <button
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600" className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
onClick={handleCloseModal} onClick={handleCloseModal}
> >
Close Close
</button> </button>
<button
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
onClick={handleEnterClick}
>
Enter: {Math.ceil(value * 0.01)}
</button>
</div> </div>
</div> </div>
</div>
)} )}
</div> </div>
); );