Refactor event details display on the event page to conditionally render date and location elements

Author: didierkrux

devconnect/src/pages/destino/[event].tsx

@@ -110,39 +110,43 @@ ${currentUrl}`
               </div>
               <div className="flex flex-col min-[480px]:flex-row gap-2 items-start min-[480px]:items-center min-[480px]:justify-between mb-2">
                 <div className="flex flex-col gap-1">
-                  <span className="inline-flex items-center gap-1 text-gray-500 text-base font-medium">
-                    <svg
-                      className="w-4 h-4 text-gray-400"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                      />
-                    </svg>
-                    {moment(eventData?.date).format('MMMM D, YYYY')}
-                  </span>
-                  <span className="inline-flex items-center gap-1 text-gray-500 text-base font-medium">
-                    <svg
-                      className="w-4 h-4 text-gray-400"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-                      />
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                    </svg>
-                    {eventData?.location}
-                  </span>
+                  {eventData?.date && (
+                    <span className="inline-flex items-center gap-1 text-gray-500 text-base font-medium">
+                      <svg
+                        className="w-4 h-4 text-gray-400"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        />
+                      </svg>
+                      {moment(eventData?.date).format('MMMM D, YYYY')}
+                    </span>
+                  )}
+                  {eventData?.location && (
+                    <span className="inline-flex items-center gap-1 text-gray-500 text-base font-medium">
+                      <svg
+                        className="w-4 h-4 text-gray-400"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+                        />
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                      </svg>
+                      {eventData?.location}
+                    </span>
+                  )}
                 </div>
                 <div className="bg-black text-xs px-3 py-1 rounded-full shadow">
                   <span className={styles['rainbow-text']}>