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,
description: true,
prize: true,
value: true,
endsAt: true,
},
});
@@ -62,6 +63,7 @@ export default async function GiveawaysPage() {
title={giveaway.title}
description={`${giveaway.description} — 🕒 ${countdownText}`}
imageUrl={giveaway.prize}
value={giveaway.value}
/>
</div>
);
src/components/GiveawayCard.tsx
+34 -20
View File
@@ -5,14 +5,19 @@ interface GiveawayCardProps {
title: string;
description: 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 handleEnterClick = () => {
// Logic to enter the giveaway
setIsModalOpen(true);
const activeUserCoins = 300; // Replace with actual logic to fetch active user's coins (TO DO LATER)
if (activeUserCoins >= value) {
setIsModalOpen(true);
} else {
alert("You do not have enough coins to enter this giveaway.");
}
};
const handleCloseModal = () => {
@@ -22,35 +27,44 @@ const GiveawayCard: React.FC<GiveawayCardProps> = ({ title, description, imageUr
return (
<div>
<div className="bg-white shadow-md rounded-lg overflow-hidden flex">
<div className="p-4 flex-1">
<h3 className="text-lg font-bold mb-2">{title}</h3>
<p className="text-gray-600 text-sm">{description}</p>
</div>
<div className="p-4 flex items-center">
<button
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
onClick={handleEnterClick}
>
Enter
</button>
</div>
<div className="p-4 flex-1">
<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 mt-2">Value: {value} coins</p>
</div>
<div className="p-4 flex items-center">
<button
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
onClick={handleEnterClick}
>
Enter
</button>
</div>
</div>
{/* Modal */}
{isModalOpen && (
<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">
<h2 className="text-xl font-bold mb-4">{title}</h2>
<p className="text-gray-600 mb-4">{description}</p>
<img src={imageUrl} alt={title} className="w-full h-48 object-cover mb-4" />
<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 relative">
<h2 className="text-xl font-bold mb-4">{title}</h2>
<p className="text-gray-600 mb-4">{description}</p>
<img src={imageUrl} alt={title} className="w-full h-48 object-cover mb-4" />
<div className="flex justify-between mt-4 text-black">
<button
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
onClick={handleCloseModal}
>
Close
</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>
);