Skip to content

Commit 61389d7

Browse files
MariferVLMariferVL
committed
Update "talks" style
1 parent ca750e9 commit 61389d7

1 file changed

Lines changed: 30 additions & 27 deletions

File tree

‎src/app/talks/page.js‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,16 @@ export default function TalksPage() {
2424
const filteredTalks = allTalks.filter((talk) => {
2525
const cityInfo = cityData[talk.city];
2626
const searchTerms = debouncedSearch.toLowerCase();
27-
27+
2828
const cityMatch = !selectedCity || talk.city === selectedCity;
29-
const categoryMatch = !selectedCategory || talk.category === selectedCategory;
29+
const categoryMatch =
30+
!selectedCategory || talk.category === selectedCategory;
3031
const dateMatch = selectedDay ? cityInfo.date === selectedDay : true;
31-
32-
const searchMatch =
32+
33+
const searchMatch =
3334
talk.title.toLowerCase().includes(searchTerms) ||
3435
talk.description.toLowerCase().includes(searchTerms) ||
35-
talk.tags?.some(tag => tag.toLowerCase().includes(searchTerms)) ||
36+
talk.tags?.some((tag) => tag.toLowerCase().includes(searchTerms)) ||
3637
talk.speaker.name.toLowerCase().includes(searchTerms);
3738

3839
return cityMatch && categoryMatch && dateMatch && searchMatch;
@@ -48,34 +49,36 @@ export default function TalksPage() {
4849
<div className="container-py">
4950
{/* Breadcrumb */}
5051
<div className="mb-6">
51-
<div className="flex items-center text-sm text-white/70">
52-
<Link href="/" className="hover:text-white transition-colors">
52+
<div className="flex items-center text-sm text-py-text/70">
53+
<Link href="/" className="hover:text-py-text transition-colors">
5354
Inicio
5455
</Link>
5556
<span className="mx-2">/</span>
56-
<span className="text-white">Charlas</span>
57+
<span className="text-py-text">Charlas</span>
5758
</div>
5859
</div>
5960

6061
{/* Hero Section */}
6162
<div className="mb-12 text-center max-w-4xl mx-auto">
62-
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
63+
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-py-text">
6364
Charlas PyDay Chile 2025
6465
</h1>
65-
<p className="text-lg text-white/80">
66+
<p className="text-lg text-py-text/80">
6667
Explora todas las charlas programadas para los eventos de PyDay Chile
6768
2025. Desde principiantes hasta expertos, tenemos contenido para todos
6869
los niveles y áreas de interés.
6970
</p>
7071
</div>
7172

72-
{/* Tabs de días modificados */}
73-
<div className="mb-8 flex overflow-x-auto scrollbar-hidden">
73+
{/* Tabs de días */}
74+
<div className="mb-8 flex overflow-x-auto scrollbar-hidden p-3">
7475
<div className="flex space-x-2 md:space-x-4 min-w-full pb-2">
7576
<button
7677
onClick={() => setSelectedDay("")}
7778
className={`px-4 py-2 rounded-lg text-sm md:text-base font-medium whitespace-nowrap ${
78-
!selectedDay ? "bg-green-700" : "bg-black/20 hover:bg-black/30"
79+
!selectedDay
80+
? "bg-py-green text-py-dark shadow-lg ring-2 ring-py-green ring-offset-2"
81+
: "bg-py-dark/20 hover:bg-py-dark/30 text-py-text"
7982
}`}
8083
>
8184
Todos los días
@@ -86,24 +89,23 @@ export default function TalksPage() {
8689
onClick={() => setSelectedDay(city.date)}
8790
className={`px-4 py-2 rounded-lg text-sm md:text-base font-medium whitespace-nowrap ${
8891
selectedDay === city.date
89-
? "bg-green-700"
90-
: "bg-black/20 hover:bg-black/30"
92+
? "bg-py-green text-py-dark shadow-lg ring-2 ring-py-green ring-offset-2"
93+
: "bg-py-dark/20 hover:bg-py-dark/30 text-py-text"
9194
}`}
9295
>
9396
{city.date.split(",")[0]} - {city.name}
9497
</button>
9598
))}
9699
</div>
97100
</div>
98-
99101
{/* Filtros de charlas */}
100-
<div className="mb-8 bg-black/20 backdrop-blur-sm rounded-lg p-4 md:p-6">
102+
<div className="mb-8 bg-py-dark/20 backdrop-blur-sm rounded-lg p-4 md:p-6">
101103
<div className="flex flex-col md:flex-row gap-4 md:items-center justify-between">
102104
<div className="flex items-center gap-2 flex-wrap">
103105
<select
104106
value={selectedCity}
105107
onChange={(e) => setSelectedCity(e.target.value)}
106-
className="bg-black/30 text-white border border-white/20 rounded px-3 py-1.5 text-sm"
108+
className="bg-py-dark/30 text-py-text border border-py-text/20 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-py-green"
107109
>
108110
<option value="">Todas las sedes</option>
109111
{Object.keys(cityData).map((cityKey) => (
@@ -116,7 +118,7 @@ export default function TalksPage() {
116118
<select
117119
value={selectedCategory}
118120
onChange={(e) => setSelectedCategory(e.target.value)}
119-
className="bg-black/30 text-white border border-white/20 rounded px-3 py-1.5 text-sm"
121+
className="bg-py-dark/30 text-py-text border border-py-text/20 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-py-green"
120122
>
121123
<option value="">Todas las categorías</option>
122124
<option value="tecnica">Técnica</option>
@@ -131,11 +133,11 @@ export default function TalksPage() {
131133
placeholder="Buscar charlas..."
132134
value={searchQuery}
133135
onChange={(e) => setSearchQuery(e.target.value)}
134-
className="bg-black/30 text-white border border-white/20 rounded pl-9 pr-3 py-1.5 w-full md:w-64 text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
136+
className="bg-py-dark/30 text-py-text border border-py-text/20 rounded pl-9 pr-3 py-1.5 w-full md:w-64 text-sm focus:outline-none focus:ring-2 focus:ring-py-green"
135137
/>
136138
<svg
137139
xmlns="http://www.w3.org/2000/svg"
138-
className="h-4 w-4 absolute left-3 top-2 text-white/60"
140+
className="h-4 w-4 absolute left-3 top-2 text-py-text/60"
139141
fill="none"
140142
viewBox="0 0 24 24"
141143
stroke="currentColor"
@@ -170,8 +172,8 @@ export default function TalksPage() {
170172
})}
171173
</div>
172174
) : (
173-
<div className="bg-black/20 backdrop-blur-sm rounded-lg p-6 md:p-8 text-center">
174-
<div className="w-16 h-16 md:w-20 md:h-20 bg-purple-600/30 rounded-full flex items-center justify-center mx-auto mb-4">
175+
<div className="bg-py-dark/20 backdrop-blur-sm rounded-lg p-6 md:p-8 text-center">
176+
<div className="w-16 h-16 md:w-20 md:h-20 bg-py-red/30 rounded-full flex items-center justify-center mx-auto mb-4">
175177
<svg
176178
xmlns="http://www.w3.org/2000/svg"
177179
className="h-8 w-8 md:h-10 md:w-10"
@@ -187,10 +189,10 @@ export default function TalksPage() {
187189
/>
188190
</svg>
189191
</div>
190-
<h3 className="text-lg md:text-xl font-bold mb-2">
192+
<h3 className="text-lg md:text-xl font-bold mb-2 text-py-text">
191193
No hay charlas disponibles aún
192194
</h3>
193-
<p className="text-white/80 mb-6">
195+
<p className="text-py-text/80 mb-6">
194196
Estamos finalizando el programa. ¡Vuelve pronto para ver las charlas
195197
confirmadas!
196198
</p>
@@ -216,8 +218,9 @@ export default function TalksPage() {
216218
</div>
217219
)}
218220

221+
{/* TODO: API para que funcione: */}
219222
{/* Subscribe for updates */}
220-
<div className="mt-16 bg-green-800/30 backdrop-blur-sm rounded-lg p-6 md:p-8">
223+
{/* <div className="mt-16 bg-green-800/30 backdrop-blur-sm rounded-lg p-6 md:p-8">
221224
<div className="max-w-4xl mx-auto">
222225
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
223226
<div>
@@ -241,7 +244,7 @@ export default function TalksPage() {
241244
</div>
242245
</div>
243246
</div>
244-
</div>
247+
</div> */}
245248
</div>
246249
);
247250
}

0 commit comments

Comments
 (0)