Impove previous edition button functionallity

Author: MariferVL

public/images/gallery/online/PYDAY_2020_ONLINE_01.webp

@@ -99,11 +99,17 @@ export const metadata = {
     url: "https://pyday.vercel.app/",
     images: [
       {
-        url: "https://pyday.vercel.app/images/logo_bg.png", 
-        width: 500,
-        height: 500,
-        alt: "Logo PyDay Chile",
+        url: "/images/banner-og.webp",
+        width: 1200,
+        height: 630,
+        alt: "PyDay Chile 2025 - Un día de Python en tu ciudad",
       },
+      // {
+      //   url: "https://pyday.vercel.app/images/logo_bg.png", 
+      //   width: 500,
+      //   height: 500,
+      //   alt: "Logo PyDay Chile",
+      // },
     ],
   },
   twitter: {

public/images/gallery/pyday2020_poster.png

@@ -1,6 +1,14 @@
-import Link from "next/link";
 import Image from "next/image";
+import Link from "next/link";
 import pastEvents from "@/data/pastEvents";
+import { images, videos } from "@/data/multimedia";
+import { SmartButton } from "@/components/SmartButton";
+
+const hasMediaForYear = (year, type) => {
+  if (type === "photos") return images.some((img) => img.year === year);
+  if (type === "videos") return videos.some((v) => v.date.startsWith(year));
+  return false;
+};
 
 export default function PreviousEditionsPage() {
   return (
@@ -75,29 +83,27 @@ export default function PreviousEditionsPage() {
                       <p className="text-py-text">{event.highlights}</p>
                     </div>
                   </div>
-                  <div className="mt-6 flex justify-center gap-4">
-                    <Link
+                  <div className="mt-6 flex justify-center gap-4 flex-wrap">
+                    <SmartButton
                       href={`/multimedia#photos-${event.year}`}
-                      target="_blank"
-                      className="btn-secondary"
+                      isAvailable={hasMediaForYear(event.year, "photos")}
                     >
                       Fotos {event.year}
-                    </Link>
-                    <Link
+                    </SmartButton>
+
+                    <SmartButton
                       href={event.webpageLink}
-                      target="_blank"
-                      className="btn-primary"
+                      isAvailable={!!event.webpageLink}
                     >
                       Sitio Web {event.year}
-                    </Link>
-                    <Link
+                    </SmartButton>
+
+                    <SmartButton
                       href={`/multimedia#videos-${event.year}`}
-                      target="_blank"
-                      className="btn-secondary"
+                      isAvailable={hasMediaForYear(event.year, "videos")}
                     >
                       Videos {event.year}
-                    </Link>
-                    
+                    </SmartButton>
                   </div>
                 </div>
               </div>

src/app/layout.js

@@ -0,0 +1,31 @@
+"use client";
+
+import Link from "next/link";
+import { classNames } from "@/lib/utils";
+
+export const SmartButton = ({ href, children, isAvailable, className }) => {
+  if (!isAvailable) {
+    return (
+      <div className="relative group inline-block">
+        <button
+          disabled
+          className={classNames(
+            className,
+            "btn-secondary opacity-50 cursor-not-allowed"
+          )}
+        >
+          {children}
+        </button>
+        <span className="absolute hidden group-hover:block -top-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white px-2 py-1 rounded text-sm whitespace-nowrap">
+          Contenido no disponible
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <Link href={href} className="btn-primary">
+      {children}
+    </Link>
+  );
+};

src/app/previous-editions/page.js

@@ -1,3 +1,4 @@
+// FIXME: Agregar los respectivos links a "webpageLink"
 const pastEvents = [
   {
     year: "2024",
@@ -12,7 +13,7 @@ const pastEvents = [
       "En la edición 2024 de PyDay Chile, la comunidad organizó con éxito un evento en Copiapó en conjunto con Inacap. Con actividades presenciales y participación online, el PyDay Copiapó 2024 reforzó el compromiso de Python Chile de expandir el alcance del lenguaje a más regiones del país.",
     photosLink: "/multimedia?year=2024",
     videosLink: "/multimedia?videos=2024",
-    webpageLink: "/2024/",
+    webpageLink: "",
   },
   {
     year: "2023",
@@ -27,7 +28,7 @@ const pastEvents = [
       "PyDay 2023 introdujo por primera vez una Hackatón en Santiago con más de 100 participantes, enfocada en IA generativa. Las charlas sobre ciencia de datos y desarrollo web fueron las más populares, y se estableció una mesa redonda sobre la comunidad Python en Chile.",
     photosLink: "/multimedia?year=2023",
     videosLink: "/multimedia?videos=2023",
-    webpageLink: "/2023/",
+    webpageLink: "",
   },
   {
     year: "2022",
@@ -42,12 +43,12 @@ const pastEvents = [
       "La primera edición presencial después de la pandemia reunió a entusiastas de Python de todo el país. Se celebraron talleres prácticos de Django, Data Science y automatización. El networking post-evento estableció colaboraciones entre empresas y desarrolladores.",
     photosLink: "/multimedia?year=2022",
     videosLink: "/multimedia?videos=2022",
-    webpageLink: "/2022/",
+    webpageLink: "",
   },
   {
     year: "2020",
     cities: ["Online"],
-    mainImage: "/images/gallery/pyday2020_poster.png", // Asegúrate que exista esa imagen
+    mainImage: "/images/gallery/online/PYDAY_2020_ONLINE_01.webp", // Asegúrate que exista esa imagen
     attendees: "+700 por Discord",
     viewers: "+1000",
     talks: 25,
@@ -56,7 +57,7 @@ const pastEvents = [
     highlights:"La primera edición nacional de PyDay Chile, realizada de manera online debido a la pandemia, fue el inicio de un sueño hecho realidad para la comunidad. Transmitido en YouTube, con participación activa en Discord y la presencia de speakers nacionales e internacionales, este evento marcó un hito para Python Chile, consolidándose como un espacio de encuentro, aprendizaje y colaboración para entusiastas de Python en el país.",
     photosLink: "/multimedia?year=2020",
     videosLink: "/multimedia?videos=2020",
-    webpageLink: "/2020/",
+    webpageLink: "",
   },
 ];
 

src/components/SmartButton.js

@@ -0,0 +1,3 @@
+export function classNames(...classes) {
+    return classes.filter(Boolean).join(' ');
+  }