Skip to content

Commit d3c7ecf

Browse files
MariferVLMariferVL
committed
Add buttons in Previous Editions to scroll to photos and videos by year in Multimedia page
1 parent 7d43c0f commit d3c7ecf

2 files changed

Lines changed: 83 additions & 51 deletions

File tree

‎src/app/multimedia/page.js‎

Lines changed: 60 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,71 @@
1-
import Gallery from '@/components/Gallery';
1+
import Gallery from "@/components/Gallery";
22

3-
const { images, videos } = require('@/data/multimedia');
3+
const { images, videos } = require("@/data/multimedia");
44

55
export default function MultimediaPage() {
6+
const photoYears = Array.from(new Set(images.map((i) => i.year)))
7+
.sort()
8+
.reverse();
9+
const videoYears = Array.from(
10+
new Set(videos.map((v) => new Date(v.date).getFullYear().toString()))
11+
)
12+
.sort()
13+
.reverse();
14+
615
return (
716
<div className="container-py">
817
<h1 className="section-title">Galería Multimedia</h1>
9-
10-
{/* Sección de Fotos */}
11-
<section className="mb-16">
12-
<h2 className="text-2xl font-bold mb-6 text-center">Fotos de ediciones anteriores</h2>
13-
<div className="max-w-6xl mx-auto">
14-
<Gallery images={images} />
15-
</div>
18+
19+
{/* Fotos por año */}
20+
<section id="photos">
21+
<h2 className="text-2xl font-bold mb-6 text-center">Fotos</h2>
22+
{photoYears.map((year) => (
23+
<div key={year} id={`photos-${year}`} className="mb-12">
24+
<h3 className="text-xl font-semibold mb-4 text-py-text">
25+
PyDay {year}
26+
</h3>
27+
<Gallery images={images.filter((img) => img.year === year)} />
28+
</div>
29+
))}
1630
</section>
17-
18-
{/* Sección de Videos */}
19-
<section>
20-
<h2 className="text-2xl font-bold mb-6 text-center">Videos destacados</h2>
21-
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
22-
{videos.map((video) => (
23-
<div key={video.id} className="bg-black/30 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg">
24-
<div className="aspect-video relative">
25-
<iframe
26-
width="560"
27-
height="315"
28-
src={video.url}
29-
title={video.title}
30-
frameBorder="0"
31-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
32-
referrerPolicy="strict-origin-when-cross-origin"
33-
allowFullScreen
34-
className="absolute inset-0 w-full h-full"
35-
></iframe>
36-
</div>
37-
<div className="p-4">
38-
<h3 className="text-lg font-semibold">{video.title}</h3>
39-
<p className="text-sm text-gray-300 mt-1">
40-
{video.speaker} • PyDay Chile {video.year}
41-
</p>
42-
</div>
31+
32+
{/* Videos por año */}
33+
<section id="videos">
34+
<h2 className="text-2xl font-bold mb-6 text-center">Videos</h2>
35+
{videoYears.map((year) => (
36+
<div key={year} id={`videos-${year}`} className="mb-12">
37+
<h3 className="text-xl font-semibold mb-4 text-py-text">
38+
PyDay {year}
39+
</h3>
40+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
41+
{videos
42+
.filter(
43+
(v) => new Date(v.date).getFullYear().toString() === year
44+
)
45+
.map((video) => (
46+
<div
47+
key={video.id}
48+
className="bg-black/30 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg"
49+
>
50+
<div className="aspect-video relative">
51+
<iframe
52+
src={video.url}
53+
title={video.title}
54+
frameBorder="0"
55+
allowFullScreen
56+
className="absolute inset-0 w-full h-full"
57+
/>
58+
</div>
59+
<div className="p-4">
60+
<h4 className="text-lg font-semibold">{video.title}</h4>
61+
<p className="text-sm text-gray-300 mt-1">{video.date}</p>
62+
</div>
63+
</div>
64+
))}
4365
</div>
44-
))}
45-
</div>
66+
</div>
67+
))}
4668
</section>
4769
</div>
4870
);
49-
}
71+
}

‎src/app/previous-editions/page.js‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,16 @@ export default function PreviousEditionsPage() {
4848
</h3>
4949
<ul className="space-y-2 mb-6 text-py-text">
5050
<li>
51-
<span className="font-medium">Asistentes:</span> {event.attendees}
51+
<span className="font-medium">Asistentes:</span>{" "}
52+
{event.attendees}
5253
</li>
5354
<li>
54-
<span className="font-medium">Charlas:</span> {event.talks}
55+
<span className="font-medium">Charlas:</span>{" "}
56+
{event.talks}
5557
</li>
5658
<li>
57-
<span className="font-medium">Talleres:</span> {event.workshops}
59+
<span className="font-medium">Talleres:</span>{" "}
60+
{event.workshops}
5861
</li>
5962
<li>
6063
<span className="font-medium">Fecha:</span> {event.date}
@@ -68,15 +71,22 @@ export default function PreviousEditionsPage() {
6871
<p className="text-py-text">{event.highlights}</p>
6972
</div>
7073
</div>
71-
{/* TODO: mejorar el acceso al año */}
72-
{/* Botón único para Fotos y Videos */}
73-
{/* <div className="mt-6 flex justify-center">
74-
{event.photosLink && (
75-
<Link href={event.photosLink} className="btn-secondary">
76-
Ver Fotos y Videos
77-
</Link>
78-
)}
79-
</div> */}
74+
<div className="mt-6 flex justify-center gap-4">
75+
<Link
76+
href={`/multimedia#photos-${event.year}`}
77+
target="_blank"
78+
className="btn-secondary"
79+
>
80+
Fotos {event.year}
81+
</Link>
82+
<Link
83+
href={`/multimedia#videos-${event.year}`}
84+
target="_blank"
85+
className="btn-secondary"
86+
>
87+
Videos {event.year}
88+
</Link>
89+
</div>
8090
</div>
8191
</div>
8292
</div>
@@ -91,4 +101,4 @@ export default function PreviousEditionsPage() {
91101
</div>
92102
</div>
93103
);
94-
}
104+
}

0 commit comments

Comments
 (0)