Giveaway modal for the giveaways

src/components/GiveawayCard.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+"use client"
+import React, { useState } from 'react';
 
 interface GiveawayCardProps {
     title: string;
@@ -7,13 +8,50 @@ interface GiveawayCardProps {
 }
 
 const GiveawayCard: React.FC<GiveawayCardProps> = ({ title, description, imageUrl }) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const handleEnterClick = () => {
+        // Logic to enter the giveaway
+        setIsModalOpen(true);
+    };
+
+    const handleCloseModal = () => {
+        setIsModalOpen(false);
+    };
+    
     return (
-        <div className="bg-white shadow-md rounded-lg overflow-hidden">
-            {/* <img src={imageUrl} alt={title} className="w-full h-48 object-cover" /> */}
-            <div className="p-4">
-                <h3 className="text-lg font-bold mb-2">{title}</h3>
-                <p className="text-gray-600 text-sm">{description}</p>
+        <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>
+
+            {/* Modal */}
+            {isModalOpen && (
+                <div className="fixed inset-0 bg-gray-500 bg-opacity-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" />
+                        <button
+                            className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
+                            onClick={handleCloseModal}
+                        >
+                            Close
+                        </button>
+                    </div>
+                </div>
+            )}
         </div>
     );
 };