Small update

src/app/giveaways/page.tsx

@@ -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

@@ -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
+        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 = () => {
@@ -25,6 +30,7 @@ const GiveawayCard: React.FC<GiveawayCardProps> = ({ title, description, imageUr
             <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
@@ -39,16 +45,24 @@ const GiveawayCard: React.FC<GiveawayCardProps> = ({ title, description, imageUr
             {/* 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">
+                <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>
             )}