活动背景

src/app/api/activity/route.js

@@ -45,6 +45,7 @@ export async function POST(request) {
   await dbConnect();
   try {
     const activityData = await request.json();
+    console.log("activityData", activityData);
     const activity = await Activity.create(activityData);
     const response = NextResponse.json(
       {

src/app/ui/components/ActivityModal.jsx

@@ -44,62 +44,70 @@ const ActivityModal = () => {
 
   if (!isOpen || !activityContent || isLoading) return null;
 
-  return (
-    // <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    //   <div className="bg-white rounded-lg p-6 max-w-sm w-full mx-4">
-    //     <div className="flex flex-col items-center mb-4 relative w-full">
-    //       <div
-    //         className="text-xl font-bold text-black w-full"
-    //         dangerouslySetInnerHTML={{ __html: activityContent.title }}
-    //       ></div>
-    //       <button
-    //         onClick={() => setIsOpen(false)}
-    //         className="text-gray-500 hover:text-gray-700 absolute right-0 top-0"
-    //       >
-    //         <X size={24} />
-    //       </button>
-    //     </div>
-    //     <div
-    //       className="text-gray-700"
-    //       dangerouslySetInnerHTML={{ __html: activityContent.content }}
-    //     />
-    //   </div>
-    // </div>
+  console.log("activityContent", activityContent);
+
+  const hasBackgroundImage = !!activityContent?.backgroundImage;
 
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="relative">
-        <button
-          onClick={() => setIsOpen(false)}
-          className="absolute -top-16 right-3 text-white hover:text-gray-300 z-20 p-2 rounded-full bg-gray-500  hover:bg-opacity-70 transition-all duration-300"
-        >
-          <X size={24} />
-        </button>
+  return (
+    <>
+      {hasBackgroundImage ? (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="relative">
+            <button
+              onClick={() => setIsOpen(false)}
+              className="absolute -top-16 right-3 text-white hover:text-gray-300 z-20 p-2 rounded-full bg-gray-500  hover:bg-opacity-70 transition-all duration-300"
+            >
+              <X size={24} />
+            </button>
 
-        <div
-          className="bg-cover bg-center rounded-lg px-6 pb-6 pt-20 max-w-sm w-full mx-4 overflow-hidden"
-          style={{
-            backgroundImage: "url('/images/ad_bg.jpg')",
-            width: "80vw",
-            minHeight: "50vh",
-            backgroundPosition: "top center",
-          }}
-        >
-          <div className="relative z-10 text-white">
+            <div
+              className="bg-cover bg-center rounded-lg px-6 pb-6 pt-16 max-w-sm w-full mx-4 overflow-hidden"
+              style={{
+                backgroundImage: `url('${activityContent.backgroundImage}')`,
+                width: "80vw",
+                minHeight: "50vh",
+                backgroundPosition: "top center",
+              }}
+            >
+              <div className="relative z-10 text-white">
+                <div className="flex flex-col items-center mb-4 relative w-full">
+                  <div
+                    className="text-xl font-bold w-full text-center"
+                    dangerouslySetInnerHTML={{ __html: activityContent.title }}
+                  ></div>
+                </div>
+                <div
+                  className="overflow-y-auto"
+                  style={{ maxHeight: "calc(50vh - 100px)" }}
+                  dangerouslySetInnerHTML={{ __html: activityContent.content }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-sm w-full mx-4">
             <div className="flex flex-col items-center mb-4 relative w-full">
               <div
-                className="text-2xl font-bold w-full text-center"
+                className="text-xl font-bold text-black w-full"
                 dangerouslySetInnerHTML={{ __html: activityContent.title }}
               ></div>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="text-gray-500 hover:text-gray-700 absolute right-0 top-0"
+              >
+                <X size={24} />
+              </button>
             </div>
             <div
-              className="overflow-y-auto"
-              style={{ maxHeight: "calc(50vh - 100px)" }}
+              className="text-gray-700"
               dangerouslySetInnerHTML={{ __html: activityContent.content }}
             />
           </div>
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 };