admin/39856-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Autosave: 20260501-144609

Browse Source
This commit is contained in:
Flatlogic Bot 2026-05-01 14:46:07 +00:00
parent e46cec7f80
commit ba7bba35d1
12 changed files with 171 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/Chinchorreo/PublicShell.tsx
View File

@ -90,18 +90,18 @@ export default function PublicShell({ activeSection, children, floatingAction }:
<div className="mb-4 inline-flex items-center gap-2 rounded-full border border-[#DAA520]/40 bg-[#DAA520]/10 px-3 py-1 text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]"> <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-[#DAA520]/40 bg-[#DAA520]/10 px-3 py-1 text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">
Chinchorreo PR Chinchorreo PR
</div> </div>
<h1 className="text-3xl font-black tracking-tight text-white">Guía boricua para salir a chinchorrear</h1> <h1 className="text-3xl font-black tracking-tight text-white">La guía boricua para cuadrar un buen chinchorreo</h1>
<p className="mt-3 text-sm leading-6 text-slate-300"> <p className="mt-3 text-sm leading-6 text-slate-300">
Rutas, chinchorros, lugares y favoritos para montar la próxima ruta con sazón. Rutas, paradas y listas para que el próximo plan salga con sabor desde el arranque.
</p> </p>
<div className="mt-5 grid grid-cols-2 gap-3 text-sm"> <div className="mt-5 grid grid-cols-2 gap-3 text-sm">
<div className="rounded-2xl border border-white/10 bg-white/5 p-3"> <div className="rounded-2xl border border-white/10 bg-white/5 p-3">
<div className="text-2xl font-black text-[#FDE68A]">{guideStats.routes}</div> <div className="text-2xl font-black text-[#FDE68A]">{guideStats.routes}</div>
<div className="text-slate-300">rutas listas</div> <div className="text-slate-300">rutas para salir</div>
</div> </div>
<div className="rounded-2xl border border-white/10 bg-white/5 p-3"> <div className="rounded-2xl border border-white/10 bg-white/5 p-3">
<div className="text-2xl font-black text-[#A7F3D0]">{guideStats.chinchorros}</div> <div className="text-2xl font-black text-[#A7F3D0]">{guideStats.chinchorros}</div>
<div className="text-slate-300">paradas</div> <div className="text-slate-300">chinchorros recomendados</div>
</div> </div>
</div> </div>
</div> </div>
@ -135,7 +135,7 @@ export default function PublicShell({ activeSection, children, floatingAction }:
<span className="mr-2">{item.emoji}</span> <span className="mr-2">{item.emoji}</span>
{item.label} {item.label}
</div> </div>
<div className="text-xs text-slate-400">Dale una vuelta</div> <div className="text-xs text-slate-400">Échale un ojo</div>
</div> </div>
</Link> </Link>
); );
@ -149,7 +149,7 @@ export default function PublicShell({ activeSection, children, floatingAction }:
className="flex flex-1 items-center justify-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-3 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10" className="flex flex-1 items-center justify-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-3 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10"
> >
<BaseIcon path={mdiLogin} size={18} /> <BaseIcon path={mdiLogin} size={18} />
Área privada Iniciar sesión
</Link> </Link>
<button <button
type="button" type="button"
@ -177,7 +177,7 @@ export default function PublicShell({ activeSection, children, floatingAction }:
className="hidden items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10 sm:inline-flex" className="hidden items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10 sm:inline-flex"
> >
<BaseIcon path={mdiLogin} size={16} /> <BaseIcon path={mdiLogin} size={16} />
Área privada Iniciar sesión
</Link> </Link>
<button <button
type="button" type="button"

6
frontend/src/components/Chinchorreo/RoutePreview.tsx
View File

@ -24,7 +24,7 @@ export default function RoutePreview({ route, compact = false }: Props) {
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
<div> <div>
<div className="text-xs font-semibold uppercase tracking-[0.25em] text-white/80"> <div className="text-xs font-semibold uppercase tracking-[0.25em] text-white/80">
Vista rápida De un vistazo
</div> </div>
<div className="mt-1 text-lg font-black tracking-tight">{route.region}</div> <div className="mt-1 text-lg font-black tracking-tight">{route.region}</div>
</div> </div>
@ -50,8 +50,8 @@ export default function RoutePreview({ route, compact = false }: Props) {
</div> </div>
<div className="mt-5 flex items-center justify-between text-xs text-white/90"> <div className="mt-5 flex items-center justify-between text-xs text-white/90">
<span>{route.stops.length} paradas</span> <span>{route.stops.length} paradas clave</span>
<span>{Math.round(route.estimatedMinutes / 60)}h aprox.</span> <span>{Math.round(route.estimatedMinutes / 60)} h aprox.</span>
</div> </div>
</div> </div>
</div> </div>

4
frontend/src/hooks/useChinchorreoStorage.ts
View File

@ -156,7 +156,7 @@ export const useChinchorreoStorage = () => {
if (!trimmedName) { if (!trimmedName) {
return { return {
ok: false, ok: false,
message: 'Ponle un nombre a la lista para guardarla.', message: 'Ponle un nombre a la lista para crearla.',
}; };
} }
@ -179,7 +179,7 @@ export const useChinchorreoStorage = () => {
return { return {
ok: true, ok: true,
message: `Lista “${trimmedName}” creada y lista para usar.`, message: `La lista “${trimmedName}” quedó creada y activa.`,
list: createdList, list: createdList,
}; };
}, },

26
frontend/src/pages/eventos/index.tsx
View File

@ -90,8 +90,8 @@ export default function EventsPage() {
setFeedback( setFeedback(
result.added result.added
? `Evento guardado en “${activeList?.name || 'Mi chinchorreo'}”.` ? `Ese evento se guardó en “${activeList?.name || 'Mi chinchorreo'}”.`
: 'Ese evento ya estaba en la lista activa.', : 'Ese evento ya lo tenías en la lista activa.',
); );
}; };
@ -106,10 +106,10 @@ export default function EventsPage() {
<div className="max-w-3xl"> <div className="max-w-3xl">
<div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">Eventos & Festivales</div> <div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">Eventos & Festivales</div>
<h1 className="mt-2 text-4xl font-black tracking-tight text-white"> <h1 className="mt-2 text-4xl font-black tracking-tight text-white">
Calendario sabroso entre comida, cultura y tradición Festivales y planes para que no se te vaya ninguno
</h1> </h1>
<p className="mt-3 text-base leading-7 text-slate-300"> <p className="mt-3 text-base leading-7 text-slate-300">
Aquí tienes un calendario mensual simplificado con contador regresivo y una lista de los próximos eventos más importantes del chinchorreo boricua. Revisa qué viene por ahí, cuándo cae y cuál vale la pena apuntar para el próximo jangueo.
</p> </p>
</div> </div>
@ -117,7 +117,7 @@ export default function EventsPage() {
<input <input
value={searchValue} value={searchValue}
onChange={(event) => setSearchValue(event.target.value)} onChange={(event) => setSearchValue(event.target.value)}
placeholder="Buscar por festival, pueblo o lugar" placeholder="Festival, pueblo o lugar..."
className="w-full rounded-2xl border border-white/10 bg-[#04111f]/50 px-4 py-3 text-white placeholder:text-slate-400 focus:border-[#DAA520] focus:outline-none focus:ring-0" className="w-full rounded-2xl border border-white/10 bg-[#04111f]/50 px-4 py-3 text-white placeholder:text-slate-400 focus:border-[#DAA520] focus:outline-none focus:ring-0"
/> />
</div> </div>
@ -134,11 +134,11 @@ export default function EventsPage() {
<div className="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl shadow-black/20"> <div className="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl shadow-black/20">
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<div> <div>
<div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">Mes destacado</div> <div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">Mes en agenda</div>
<h2 className="mt-2 text-3xl font-black text-white">{monthLabel(calendarMonth)}</h2> <h2 className="mt-2 text-3xl font-black text-white">{monthLabel(calendarMonth)}</h2>
</div> </div>
<div className="rounded-full border border-white/10 bg-white/5 px-3 py-2 text-sm font-semibold text-slate-200"> <div className="rounded-full border border-white/10 bg-white/5 px-3 py-2 text-sm font-semibold text-slate-200">
{filteredEvents.length} eventos visibles {filteredEvents.length} eventos en agenda
</div> </div>
</div> </div>
@ -197,15 +197,15 @@ export default function EventsPage() {
<div className="space-y-4 p-5"> <div className="space-y-4 p-5">
<div className="grid gap-3 md:grid-cols-3"> <div className="grid gap-3 md:grid-cols-3">
<div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300"> <div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300">
<div className="text-xs uppercase tracking-[0.2em] text-slate-500">Fecha</div> <div className="text-xs uppercase tracking-[0.2em] text-slate-500">Cuándo</div>
<div className="mt-2 font-semibold text-white">{formatEventDate(event.nextDateIso)}</div> <div className="mt-2 font-semibold text-white">{formatEventDate(event.nextDateIso)}</div>
</div> </div>
<div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300"> <div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300">
<div className="text-xs uppercase tracking-[0.2em] text-slate-500">Lugar</div> <div className="text-xs uppercase tracking-[0.2em] text-slate-500">Dónde</div>
<div className="mt-2 font-semibold text-white">{event.venue}</div> <div className="mt-2 font-semibold text-white">{event.venue}</div>
</div> </div>
<div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300"> <div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300">
<div className="text-xs uppercase tracking-[0.2em] text-slate-500">Cuenta regresiva</div> <div className="text-xs uppercase tracking-[0.2em] text-slate-500">Falta</div>
<div className="mt-2 font-semibold text-[#FDE68A]">{getCountdownLabel(event.nextDateIso)}</div> <div className="mt-2 font-semibold text-[#FDE68A]">{getCountdownLabel(event.nextDateIso)}</div>
</div> </div>
</div> </div>
@ -225,7 +225,7 @@ export default function EventsPage() {
].join(' ')} ].join(' ')}
> >
<BaseIcon path={mdiStarOutline} size={16} /> <BaseIcon path={mdiStarOutline} size={16} />
{saved ? 'Evento guardado' : 'Guardar evento'} {saved ? 'Ya guardado' : 'Guardar'}
</button> </button>
<div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-200"> <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-200">
<BaseIcon path={mdiCalendarStar} size={16} /> <BaseIcon path={mdiCalendarStar} size={16} />
@ -241,9 +241,9 @@ export default function EventsPage() {
{!filteredEvents.length ? ( {!filteredEvents.length ? (
<section className="rounded-[2rem] border border-dashed border-white/15 bg-white/5 p-10 text-center shadow-xl shadow-black/20"> <section className="rounded-[2rem] border border-dashed border-white/15 bg-white/5 p-10 text-center shadow-xl shadow-black/20">
<h2 className="text-2xl font-black text-white">No salió ningún evento con esa búsqueda</h2> <h2 className="text-2xl font-black text-white">No encontramos ningún evento con esa búsqueda</h2>
<p className="mt-3 text-sm leading-6 text-slate-300"> <p className="mt-3 text-sm leading-6 text-slate-300">
Prueba con otro pueblo o lugar, o limpia la búsqueda para ver qué viene por ahí. Prueba con otro pueblo o limpia la búsqueda para ver los que vienen por ahí.
</p> </p>
</section> </section>
) : null} ) : null}

29
frontend/src/pages/index.tsx
View File

@ -56,7 +56,7 @@ const SectionHeader = ({
href={href} href={href}
className="inline-flex items-center gap-2 self-start rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10" className="inline-flex items-center gap-2 self-start rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10"
> >
Ver todo Ver más
<BaseIcon path={mdiChevronRight} size={16} /> <BaseIcon path={mdiChevronRight} size={16} />
</Link> </Link>
) : null} ) : null}
@ -93,7 +93,7 @@ export default function HomePage() {
<PublicShell <PublicShell
activeSection="inicio" activeSection="inicio"
floatingAction={{ floatingAction={{
label: 'Sorpréndeme con una ruta 🎲', label: 'Dame una ruta 🎲',
icon: mdiDice5Outline, icon: mdiDice5Outline,
onClick: handleRandomRoute, onClick: handleRandomRoute,
}} }}
@ -115,11 +115,10 @@ export default function HomePage() {
¡Vamos a chinchorrear! ¡Vamos a chinchorrear!
</div> </div>
<h1 className="mt-5 text-4xl font-black tracking-tight text-white sm:text-5xl lg:text-6xl"> <h1 className="mt-5 text-4xl font-black tracking-tight text-white sm:text-5xl lg:text-6xl">
Tu guía interactiva para janguear Puerto Rico con sabor, ruta y corillo. Tu próxima salida por Puerto Rico empieza aquí.
</h1> </h1>
<p className="mt-4 max-w-2xl text-base leading-7 text-slate-200 sm:text-lg"> <p className="mt-4 max-w-2xl text-base leading-7 text-slate-200 sm:text-lg">
Explora rutas auténticas, guarda tus paradas favoritas y descubre eventos, vistas y Encuentra rutas, guarda paradas, mira eventos y descubre chinchorros para cuadrar el plan sin tanta vuelta.
chinchorros con una estética boricua vibrante y elegante.
</p> </p>
<div className="relative mt-6 max-w-2xl"> <div className="relative mt-6 max-w-2xl">
@ -130,7 +129,7 @@ export default function HomePage() {
<input <input
value={searchValue} value={searchValue}
onChange={(event) => setSearchValue(event.target.value)} onChange={(event) => setSearchValue(event.target.value)}
placeholder="Buscar restaurante, ruta, pueblo o festival" placeholder="Ruta, chinchorro, pueblo o festival..."
className="w-full border-0 bg-transparent text-base text-white placeholder:text-slate-400 focus:ring-0" className="w-full border-0 bg-transparent text-base text-white placeholder:text-slate-400 focus:ring-0"
/> />
<button <button
@ -171,23 +170,23 @@ export default function HomePage() {
className="inline-flex items-center gap-2 rounded-full bg-[#CE1126] px-5 py-3 text-sm font-bold text-white transition hover:bg-[#b90f23]" className="inline-flex items-center gap-2 rounded-full bg-[#CE1126] px-5 py-3 text-sm font-bold text-white transition hover:bg-[#b90f23]"
> >
<BaseIcon path={mdiMapMarkerPath} size={18} /> <BaseIcon path={mdiMapMarkerPath} size={18} />
Explorar rutas Ver rutas
</Link> </Link>
<Link <Link
href="/login" href="/login"
className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-5 py-3 text-sm font-bold text-white transition hover:border-white/25 hover:bg-white/15" className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-5 py-3 text-sm font-bold text-white transition hover:border-white/25 hover:bg-white/15"
> >
<BaseIcon path={mdiLogin} size={18} /> <BaseIcon path={mdiLogin} size={18} />
Área privada Iniciar sesión
</Link> </Link>
</div> </div>
</div> </div>
<div className="grid gap-4 sm:grid-cols-3 lg:grid-cols-1"> <div className="grid gap-4 sm:grid-cols-3 lg:grid-cols-1">
{[ {[
{ label: 'Rutas curadas', value: guideStats.routes, accent: '#FDE68A' }, { label: 'Rutas bien armadas', value: guideStats.routes, accent: '#FDE68A' },
{ label: 'Chinchorros destacados', value: guideStats.chinchorros, accent: '#A7F3D0' }, { label: 'Chinchorros recomendados', value: guideStats.chinchorros, accent: '#A7F3D0' },
{ label: 'Eventos cercanos', value: guideStats.events, accent: '#BFDBFE' }, { label: 'Eventos por venir', value: guideStats.events, accent: '#BFDBFE' },
].map((stat) => ( ].map((stat) => (
<div <div
key={stat.label} key={stat.label}
@ -199,7 +198,7 @@ export default function HomePage() {
<div className="mt-3 text-4xl font-black tracking-tight" style={{ color: stat.accent }}> <div className="mt-3 text-4xl font-black tracking-tight" style={{ color: stat.accent }}>
{stat.value} {stat.value}
</div> </div>
<div className="mt-2 text-sm text-slate-200">Listas para descubrir hoy mismo.</div> <div className="mt-2 text-sm text-slate-200">Buenas para arrancar hoy mismo.</div>
</div> </div>
))} ))}
</div> </div>
@ -285,7 +284,7 @@ export default function HomePage() {
href={`/restaurantes?search=${encodeURIComponent(stop.name)}`} href={`/restaurantes?search=${encodeURIComponent(stop.name)}`}
className="inline-flex items-center gap-2 text-sm font-semibold text-[#FDE68A]" className="inline-flex items-center gap-2 text-sm font-semibold text-[#FDE68A]"
> >
Ver en la guía Abrir en la guía
<BaseIcon path={mdiChevronRight} size={16} /> <BaseIcon path={mdiChevronRight} size={16} />
</Link> </Link>
</div> </div>
@ -322,7 +321,7 @@ export default function HomePage() {
</div> </div>
<div className="mt-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-xs font-semibold text-slate-200"> <div className="mt-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-xs font-semibold text-slate-200">
<BaseIcon path={mdiWeatherPartlyCloudy} size={16} /> <BaseIcon path={mdiWeatherPartlyCloudy} size={16} />
Ideal para ruta mixta de costa y montaña Buen día para mezclar costa y montaña
</div> </div>
</div> </div>
@ -340,7 +339,7 @@ export default function HomePage() {
href="/tips" href="/tips"
className="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-[#A7F3D0]" className="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-[#A7F3D0]"
> >
Ver guía completa Ver tips
<BaseIcon path={mdiChevronRight} size={16} /> <BaseIcon path={mdiChevronRight} size={16} />
</Link> </Link>
</div> </div>

33
frontend/src/pages/lugares/index.tsx
View File

@ -53,45 +53,44 @@ export default function PlacesPage() {
setFeedback( setFeedback(
result.added result.added
? `Lugar guardado en “${activeList?.name || 'Mi chinchorreo'}”.` ? `Ese lugar se guardó en “${activeList?.name || 'Mi chinchorreo'}”.`
: 'Ese lugar ya estaba en la lista activa.', : 'Ese lugar ya lo tenías en la lista activa.',
); );
}; };
return ( return (
<> <>
<Head> <Head>
<title>Chinchorreo PR | Lugares de Interés</title> <title>Chinchorreo PR | Lugares</title>
</Head> </Head>
<PublicShell activeSection="lugares"> <PublicShell activeSection="lugares">
<section className="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl shadow-black/20 sm:p-8"> <section className="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl shadow-black/20 sm:p-8">
<div className="max-w-3xl"> <div className="max-w-3xl">
<div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">Lugares de interés</div> <div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">Lugares</div>
<h1 className="mt-2 text-4xl font-black tracking-tight text-white"> <h1 className="mt-2 text-4xl font-black tracking-tight text-white">
Playas, miradores, pueblos y cultura para completar la ruta Playas, miradores y pueblos que le suman al plan
</h1> </h1>
<p className="mt-3 text-base leading-7 text-slate-300"> <p className="mt-3 text-base leading-7 text-slate-300">
Usa estos lugares como pausas estratégicas entre paradas gastronómicas: fotos, vistas, Aquí encuentras paradas buenas para sacar fotos, coger aire o meterle una vista brutal antes de seguir.
artesanías o una caminata corta para seguir con el plan.
</p> </p>
</div> </div>
<div className="mt-6 grid gap-4 rounded-[1.8rem] border border-white/10 bg-[#04111f]/50 p-4 md:grid-cols-[2fr_1fr]"> <div className="mt-6 grid gap-4 rounded-[1.8rem] border border-white/10 bg-[#04111f]/50 p-4 md:grid-cols-[2fr_1fr]">
<label className="block"> <label className="block">
<div className="mb-2 text-xs font-semibold uppercase tracking-[0.25em] text-slate-400"> <div className="mb-2 text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">
Buscar lugar Busca un lugar
</div> </div>
<input <input
value={searchValue} value={searchValue}
onChange={(event) => setSearchValue(event.target.value)} onChange={(event) => setSearchValue(event.target.value)}
placeholder="Loíza, playa, mirador, cultura..." placeholder="Pueblo, playa, mirador o plan cultural..."
className="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder:text-slate-400 focus:border-[#DAA520] focus:outline-none focus:ring-0" className="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder:text-slate-400 focus:border-[#DAA520] focus:outline-none focus:ring-0"
/> />
</label> </label>
<label className="block"> <label className="block">
<div className="mb-2 text-xs font-semibold uppercase tracking-[0.25em] text-slate-400"> <div className="mb-2 text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">
Categoría Tipo de lugar
</div> </div>
<select <select
value={selectedCategory} value={selectedCategory}
@ -109,7 +108,7 @@ export default function PlacesPage() {
<div className="mt-4 flex flex-wrap items-center gap-3 text-sm text-slate-300"> <div className="mt-4 flex flex-wrap items-center gap-3 text-sm text-slate-300">
<div className="rounded-full border border-white/10 bg-white/5 px-4 py-2"> <div className="rounded-full border border-white/10 bg-white/5 px-4 py-2">
{filteredPlaces.length} lugares disponibles {filteredPlaces.length} paradas para explorar
</div> </div>
{feedback ? ( {feedback ? (
<div className="inline-flex items-center gap-2 rounded-full border border-[#228B22]/30 bg-[#228B22]/10 px-4 py-2 text-[#A7F3D0]"> <div className="inline-flex items-center gap-2 rounded-full border border-[#228B22]/30 bg-[#228B22]/10 px-4 py-2 text-[#A7F3D0]">
@ -122,9 +121,9 @@ export default function PlacesPage() {
{!filteredPlaces.length ? ( {!filteredPlaces.length ? (
<section className="rounded-[2rem] border border-dashed border-white/15 bg-white/5 p-10 text-center shadow-xl shadow-black/20"> <section className="rounded-[2rem] border border-dashed border-white/15 bg-white/5 p-10 text-center shadow-xl shadow-black/20">
<h2 className="text-2xl font-black text-white">Con esos filtros no salió ningún lugar</h2> <h2 className="text-2xl font-black text-white">No encontramos ningún lugar con esos filtros</h2>
<p className="mt-3 text-sm leading-6 text-slate-300"> <p className="mt-3 text-sm leading-6 text-slate-300">
Prueba otro pueblo, cambia la categoría o borra la búsqueda para seguir explorando. Prueba otro pueblo, cambia el tipo de lugar o borra la búsqueda para seguir mirando.
</p> </p>
</section> </section>
) : null} ) : null}
@ -152,11 +151,11 @@ export default function PlacesPage() {
<div className="space-y-4 p-5"> <div className="space-y-4 p-5">
<p className="text-sm leading-6 text-slate-300">{place.description}</p> <p className="text-sm leading-6 text-slate-300">{place.description}</p>
<div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300"> <div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300">
<div className="text-xs uppercase tracking-[0.2em] text-slate-500">Mejor horario</div> <div className="text-xs uppercase tracking-[0.2em] text-slate-500">Cuándo ir</div>
<div className="mt-2 font-semibold text-white">{place.bestTime}</div> <div className="mt-2 font-semibold text-white">{place.bestTime}</div>
</div> </div>
<div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300"> <div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300">
<div className="text-xs uppercase tracking-[0.2em] text-slate-500">Consejo local</div> <div className="text-xs uppercase tracking-[0.2em] text-slate-500">Dato local</div>
<div className="mt-2 leading-6 text-white">{place.localTip}</div> <div className="mt-2 leading-6 text-white">{place.localTip}</div>
</div> </div>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
@ -167,7 +166,7 @@ export default function PlacesPage() {
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10"
> >
<BaseIcon path={mdiCompassOutline} size={16} /> <BaseIcon path={mdiCompassOutline} size={16} />
Cómo llegar Abrir en Maps
</a> </a>
<button <button
type="button" type="button"
@ -180,7 +179,7 @@ export default function PlacesPage() {
].join(' ')} ].join(' ')}
> >
<BaseIcon path={mdiStarOutline} size={16} /> <BaseIcon path={mdiStarOutline} size={16} />
{saved ? 'Lugar guardado' : 'Guardar lugar'} {saved ? 'Ya guardado' : 'Guardar'}
</button> </button>
</div> </div>
<div className="inline-flex items-center gap-2 text-sm text-slate-300"> <div className="inline-flex items-center gap-2 text-sm text-slate-300">

36
frontend/src/pages/mapa.tsx
View File

@ -118,27 +118,27 @@ export default function MapPage() {
<div className="max-w-3xl"> <div className="max-w-3xl">
<div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">Mapa interactivo</div> <div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">Mapa interactivo</div>
<h1 className="mt-2 text-4xl font-black tracking-tight text-white"> <h1 className="mt-2 text-4xl font-black tracking-tight text-white">
Un mapa estilizado para descubrir paradas por categoría Mira todo en mapa y arma la ruta a tu manera
</h1> </h1>
<p className="mt-3 text-base leading-7 text-slate-300"> <p className="mt-3 text-base leading-7 text-slate-300">
Esta primera versión te deja alternar entre mapa y lista, filtrar categorías y trazar una mini ruta con los pins que selecciones. Explora por mapa o por lista, filtra lo que quieres ver y marca las paradas que te llamen.
</p> </p>
</div> </div>
<div className="mt-6 grid gap-4 rounded-[1.8rem] border border-white/10 bg-[#04111f]/50 p-4 md:grid-cols-[2fr_1fr_1fr] lg:grid-cols-[2fr_1fr_1fr_1fr]"> <div className="mt-6 grid gap-4 rounded-[1.8rem] border border-white/10 bg-[#04111f]/50 p-4 md:grid-cols-[2fr_1fr_1fr] lg:grid-cols-[2fr_1fr_1fr_1fr]">
<label className="block md:col-span-1 lg:col-span-2"> <label className="block md:col-span-1 lg:col-span-2">
<div className="mb-2 text-xs font-semibold uppercase tracking-[0.25em] text-slate-400"> <div className="mb-2 text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">
Buscar pin Busca una parada
</div> </div>
<input <input
value={searchValue} value={searchValue}
onChange={(event) => setSearchValue(event.target.value)} onChange={(event) => setSearchValue(event.target.value)}
placeholder="Piñones, Loíza, Luquillo, cultura..." placeholder="Pueblo, parada, chinchorro o plan cultural..."
className="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder:text-slate-400 focus:border-[#DAA520] focus:outline-none focus:ring-0" className="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder:text-slate-400 focus:border-[#DAA520] focus:outline-none focus:ring-0"
/> />
</label> </label>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">Categorías</div> <div className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">Qué quieres ver</div>
<button <button
type="button" type="button"
onClick={() => setShowChinchorros((current) => !current)} onClick={() => setShowChinchorros((current) => !current)}
@ -165,7 +165,7 @@ export default function MapPage() {
</button> </button>
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">Vista</div> <div className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">Cómo verlo</div>
{(['mapa', 'lista'] as MapViewMode[]).map((viewMode) => ( {(['mapa', 'lista'] as MapViewMode[]).map((viewMode) => (
<button <button
key={viewMode} key={viewMode}
@ -227,9 +227,9 @@ export default function MapPage() {
<div className="absolute bottom-6 left-6 rounded-[1.6rem] border border-white/10 bg-[#04111f]/70 p-4 text-sm text-slate-200 backdrop-blur"> <div className="absolute bottom-6 left-6 rounded-[1.6rem] border border-white/10 bg-[#04111f]/70 p-4 text-sm text-slate-200 backdrop-blur">
<div className="inline-flex items-center gap-2 text-[#FDE68A]"> <div className="inline-flex items-center gap-2 text-[#FDE68A]">
<BaseIcon path={mdiMapLegend} size={16} /> <BaseIcon path={mdiMapLegend} size={16} />
Selecciona un pin para ver detalle Toca una parada para verla mejor
</div> </div>
<div className="mt-2">Usa “Agregar a la ruta” para conectar varios puntos.</div> <div className="mt-2">Si te gusta una, súmala con “Sumar a la ruta”.</div>
</div> </div>
</div> </div>
) : ( ) : (
@ -263,7 +263,7 @@ export default function MapPage() {
: 'border-white/10 bg-white/5 text-white hover:border-white/20 hover:bg-white/10', : 'border-white/10 bg-white/5 text-white hover:border-white/20 hover:bg-white/10',
].join(' ')} ].join(' ')}
> >
{inRoute ? 'Quitar de la ruta' : 'Agregar a la ruta'} {inRoute ? 'Sacar de la ruta' : 'Sumar a la ruta'}
</button> </button>
</article> </article>
); );
@ -297,7 +297,7 @@ export default function MapPage() {
href={selectedItem.href} href={selectedItem.href}
className="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-semibold text-[#04111f]" className="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-semibold text-[#04111f]"
> >
Ver en la guía Abrir en la guía
<BaseIcon path={mdiChevronRight} size={16} /> <BaseIcon path={mdiChevronRight} size={16} />
</Link> </Link>
<a <a
@ -307,7 +307,7 @@ export default function MapPage() {
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10"
> >
<BaseIcon path={mdiCompassOutline} size={16} /> <BaseIcon path={mdiCompassOutline} size={16} />
Google Maps Abrir en Maps
</a> </a>
<button <button
type="button" type="button"
@ -320,8 +320,8 @@ export default function MapPage() {
].join(' ')} ].join(' ')}
> >
{routeSelection.includes(selectedItem.id) {routeSelection.includes(selectedItem.id)
? 'Quitar de la ruta' ? 'Sacar de la ruta'
: 'Agregar a la ruta'} : 'Sumar a la ruta'}
</button> </button>
</div> </div>
</div> </div>
@ -350,14 +350,14 @@ export default function MapPage() {
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-xs font-semibold text-slate-200" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-xs font-semibold text-slate-200"
> >
<BaseIcon path={mdiCloseCircleOutline} size={14} /> <BaseIcon path={mdiCloseCircleOutline} size={14} />
Quitar Sacar
</button> </button>
</div> </div>
))} ))}
</div> </div>
) : ( ) : (
<div className="mt-5 rounded-[1.6rem] border border-dashed border-white/10 bg-[#04111f]/40 p-5 text-sm leading-6 text-slate-300"> <div className="mt-5 rounded-[1.6rem] border border-dashed border-white/10 bg-[#04111f]/40 p-5 text-sm leading-6 text-slate-300">
Marca varias paradas para armar una mini ruta. Con dos o más ya puedes abrirla. Suma varias paradas y aquí se te arma la mini ruta. Con dos o más ya la puedes abrir.
</div> </div>
)} )}
@ -369,7 +369,7 @@ export default function MapPage() {
className="mt-5 inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f]" className="mt-5 inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f]"
> >
<BaseIcon path={mdiMapSearchOutline} size={16} /> <BaseIcon path={mdiMapSearchOutline} size={16} />
Abrir ruta Abrir en Maps
</a> </a>
) : null} ) : null}
</div> </div>
@ -378,9 +378,9 @@ export default function MapPage() {
{!visibleItems.length ? ( {!visibleItems.length ? (
<section className="rounded-[2rem] border border-dashed border-white/15 bg-white/5 p-10 text-center shadow-xl shadow-black/20"> <section className="rounded-[2rem] border border-dashed border-white/15 bg-white/5 p-10 text-center shadow-xl shadow-black/20">
<h2 className="text-2xl font-black text-white">Con esos filtros no se ve ninguna parada en el mapa</h2> <h2 className="text-2xl font-black text-white">No encontramos paradas con esos filtros</h2>
<p className="mt-3 text-sm leading-6 text-slate-300"> <p className="mt-3 text-sm leading-6 text-slate-300">
Vuelve a activar chinchorros o lugares, o limpia la búsqueda para verlo completo otra vez. Activa otra vez chinchorros o lugares, o limpia la búsqueda para verlo completo.
</p> </p>
</section> </section>
) : null} ) : null}

53
frontend/src/pages/mis-favoritos.tsx
View File

@ -21,7 +21,7 @@ import LayoutGuest from '../layouts/Guest';
const categoryLabels: Record<FavoriteCategory, string> = { const categoryLabels: Record<FavoriteCategory, string> = {
route: 'Rutas', route: 'Rutas',
chinchorro: 'Restaurantes', chinchorro: 'Chinchorros',
place: 'Lugares', place: 'Lugares',
event: 'Eventos', event: 'Eventos',
}; };
@ -73,7 +73,7 @@ export default function FavoritesPage() {
const shareList = () => { const shareList = () => {
if (!activeFavorites.length) { if (!activeFavorites.length) {
setFeedback('Agrega al menos una ruta o chinchorro antes de compartir la lista.'); setFeedback('Guarda aunque sea una parada antes de compartir esta lista.');
return; return;
} }
@ -91,52 +91,51 @@ export default function FavoritesPage() {
const handleRemoveFavorite = (category: FavoriteCategory, itemSlug: string) => { const handleRemoveFavorite = (category: FavoriteCategory, itemSlug: string) => {
removeFavorite(category, itemSlug, activeListId); removeFavorite(category, itemSlug, activeListId);
setFeedback('Se quitó de la lista activa.'); setFeedback('Lo saqué de esta lista.');
}; };
const handleRemoveList = () => { const handleRemoveList = () => {
const removed = removeList(activeListId); const removed = removeList(activeListId);
setFeedback( setFeedback(
removed removed
? 'La lista personalizada fue eliminada.' ? 'Lista borrada.'
: 'La lista principal “Mi chinchorreo” no se puede eliminar.', : '“Mi chinchorreo” es la lista principal y no se puede borrar.',
); );
}; };
const handleClearList = () => { const handleClearList = () => {
clearListFavorites(activeListId); clearListFavorites(activeListId);
setFeedback('Se vació la lista activa, pero la lista sigue creada.'); setFeedback('La lista quedó vacía, pero sigue ahí.');
}; };
return ( return (
<> <>
<Head> <Head>
<title>Chinchorreo PR | Mis Favoritos</title> <title>Chinchorreo PR | Favoritos</title>
</Head> </Head>
<PublicShell activeSection="favoritos"> <PublicShell activeSection="favoritos">
<section className="grid gap-6 xl:grid-cols-[1fr_1fr]"> <section className="grid gap-6 xl:grid-cols-[1fr_1fr]">
<div className="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl shadow-black/20 sm:p-8"> <div className="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl shadow-black/20 sm:p-8">
<div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">Mis Favoritos</div> <div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">Favoritos</div>
<h1 className="mt-2 text-4xl font-black tracking-tight text-white"> <h1 className="mt-2 text-4xl font-black tracking-tight text-white">
Crea listas y guarda tus próximos jangueos Guarda ideas para el próximo chinchorreo
</h1> </h1>
<p className="mt-3 text-base leading-7 text-slate-300"> <p className="mt-3 text-base leading-7 text-slate-300">
Tus favoritos se guardan en este dispositivo: puedes crear listas, Arma listas por plan, deja una activa y comparte por WhatsApp lo que ya vas cuadrando.
elegir una lista activa y compartirla por WhatsApp.
</p> </p>
<div className="mt-6 grid gap-4 sm:grid-cols-3"> <div className="mt-6 grid gap-4 sm:grid-cols-3">
<div className="rounded-[1.7rem] border border-white/10 bg-[#04111f]/60 p-4"> <div className="rounded-[1.7rem] border border-white/10 bg-[#04111f]/60 p-4">
<div className="text-xs uppercase tracking-[0.25em] text-slate-400">Listas</div> <div className="text-xs uppercase tracking-[0.25em] text-slate-400">Tus listas</div>
<div className="mt-2 text-3xl font-black text-white">{lists.length}</div> <div className="mt-2 text-3xl font-black text-white">{lists.length}</div>
</div> </div>
<div className="rounded-[1.7rem] border border-white/10 bg-[#04111f]/60 p-4"> <div className="rounded-[1.7rem] border border-white/10 bg-[#04111f]/60 p-4">
<div className="text-xs uppercase tracking-[0.25em] text-slate-400">Activa</div> <div className="text-xs uppercase tracking-[0.25em] text-slate-400">Lista activa</div>
<div className="mt-2 text-xl font-black text-[#FDE68A]">{activeList?.name}</div> <div className="mt-2 text-xl font-black text-[#FDE68A]">{activeList?.name}</div>
</div> </div>
<div className="rounded-[1.7rem] border border-white/10 bg-[#04111f]/60 p-4"> <div className="rounded-[1.7rem] border border-white/10 bg-[#04111f]/60 p-4">
<div className="text-xs uppercase tracking-[0.25em] text-slate-400">Guardados</div> <div className="text-xs uppercase tracking-[0.25em] text-slate-400">En esta lista</div>
<div className="mt-2 text-3xl font-black text-white">{activeFavorites.length}</div> <div className="mt-2 text-3xl font-black text-white">{activeFavorites.length}</div>
</div> </div>
</div> </div>
@ -185,7 +184,7 @@ export default function FavoritesPage() {
type="submit" type="submit"
className="inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f]" className="inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f]"
> >
Crear lista Crear esta lista
<BaseIcon path={mdiChevronRight} size={16} /> <BaseIcon path={mdiChevronRight} size={16} />
</button> </button>
</div> </div>
@ -205,14 +204,14 @@ export default function FavoritesPage() {
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10"
> >
<BaseIcon path={mdiShareVariantOutline} size={16} /> <BaseIcon path={mdiShareVariantOutline} size={16} />
Compartir lista Compartir por WhatsApp
</button> </button>
<button <button
type="button" type="button"
onClick={handleClearList} onClick={handleClearList}
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-transparent px-4 py-2 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/5" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-transparent px-4 py-2 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/5"
> >
Vaciar esta lista Dejarla vacía
</button> </button>
{activeListId !== DEFAULT_PUBLIC_LIST_ID ? ( {activeListId !== DEFAULT_PUBLIC_LIST_ID ? (
<button <button
@ -220,7 +219,7 @@ export default function FavoritesPage() {
onClick={handleRemoveList} onClick={handleRemoveList}
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-transparent px-4 py-2 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/5" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-transparent px-4 py-2 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/5"
> >
Eliminar lista Borrar lista
</button> </button>
) : null} ) : null}
</div> </div>
@ -242,12 +241,12 @@ export default function FavoritesPage() {
].join(' ')} ].join(' ')}
> >
<div className="text-xs uppercase tracking-[0.25em] text-slate-400"> <div className="text-xs uppercase tracking-[0.25em] text-slate-400">
{isActive ? 'Lista activa' : 'Usar esta lista'} {isActive ? 'La que estás usando' : 'Usar esta'}
</div> </div>
<h3 className="mt-2 text-2xl font-black text-white">{list.name}</h3> <h3 className="mt-2 text-2xl font-black text-white">{list.name}</h3>
<p className="mt-2 text-sm leading-6 text-slate-300">{list.description}</p> <p className="mt-2 text-sm leading-6 text-slate-300">{list.description}</p>
<div className="mt-4 text-sm text-slate-400"> <div className="mt-4 text-sm text-slate-400">
{(favoritesByList[list.id] || []).length} guardados {(favoritesByList[list.id] || []).length} guardados aquí
</div> </div>
</button> </button>
); );
@ -268,7 +267,7 @@ export default function FavoritesPage() {
<div className={`text-xs font-bold uppercase tracking-[0.35em] ${categoryAccents[category]}`}> <div className={`text-xs font-bold uppercase tracking-[0.35em] ${categoryAccents[category]}`}>
{categoryLabels[category]} {categoryLabels[category]}
</div> </div>
<h2 className="mt-2 text-2xl font-black text-white">{items.length} guardados</h2> <h2 className="mt-2 text-2xl font-black text-white">{items.length} en esta categoría</h2>
</div> </div>
<div className="rounded-full border border-white/10 bg-white/5 px-3 py-2 text-sm font-semibold text-slate-200"> <div className="rounded-full border border-white/10 bg-white/5 px-3 py-2 text-sm font-semibold text-slate-200">
{categoryLabels[category]} {categoryLabels[category]}
@ -296,7 +295,7 @@ export default function FavoritesPage() {
href={item.itemHref} href={item.itemHref}
className="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-semibold text-[#04111f]" className="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-semibold text-[#04111f]"
> >
Ver en la guía Abrir en la guía
<BaseIcon path={mdiChevronRight} size={16} /> <BaseIcon path={mdiChevronRight} size={16} />
</Link> </Link>
<button <button
@ -305,7 +304,7 @@ export default function FavoritesPage() {
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-transparent px-4 py-2 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/5" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-transparent px-4 py-2 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/5"
> >
<BaseIcon path={mdiCloseCircleOutline} size={16} /> <BaseIcon path={mdiCloseCircleOutline} size={16} />
Quitar Sacar
</button> </button>
</div> </div>
</div> </div>
@ -313,7 +312,7 @@ export default function FavoritesPage() {
</div> </div>
) : ( ) : (
<div className="mt-5 rounded-[1.6rem] border border-dashed border-white/10 bg-[#04111f]/40 p-6 text-sm leading-6 text-slate-300"> <div className="mt-5 rounded-[1.6rem] border border-dashed border-white/10 bg-[#04111f]/40 p-6 text-sm leading-6 text-slate-300">
Aquí todavía no has guardado {categoryLabels[category].toLowerCase()} en esta lista. Todavía no has guardado {categoryLabels[category].toLowerCase()} en esta lista.
</div> </div>
)} )}
</article> </article>
@ -324,7 +323,7 @@ export default function FavoritesPage() {
{!activeFavorites.length ? ( {!activeFavorites.length ? (
<section className="rounded-[2rem] border border-dashed border-white/15 bg-white/5 p-10 text-center shadow-xl shadow-black/20"> <section className="rounded-[2rem] border border-dashed border-white/15 bg-white/5 p-10 text-center shadow-xl shadow-black/20">
<BaseIcon path={mdiStarOutline} size={42} className="mx-auto text-[#FDE68A]" /> <BaseIcon path={mdiStarOutline} size={42} className="mx-auto text-[#FDE68A]" />
<h2 className="mt-4 text-3xl font-black text-white">Esta lista está vacía por ahora</h2> <h2 className="mt-4 text-3xl font-black text-white">Todavía no hay nada en esta lista</h2>
<p className="mt-3 text-sm leading-6 text-slate-300"> <p className="mt-3 text-sm leading-6 text-slate-300">
Guarda una ruta, un chinchorro o un lugar desde la guía y aquí se te irá armando el plan. Guarda una ruta, un chinchorro o un lugar desde la guía y aquí se te irá armando el plan.
</p> </p>
@ -333,13 +332,13 @@ export default function FavoritesPage() {
href="/rutas" href="/rutas"
className="rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f]" className="rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f]"
> >
Explorar rutas Ir a rutas
</Link> </Link>
<Link <Link
href="/restaurantes" href="/restaurantes"
className="rounded-full border border-white/10 bg-white/5 px-5 py-3 text-sm font-bold text-white" className="rounded-full border border-white/10 bg-white/5 px-5 py-3 text-sm font-bold text-white"
> >
Ver chinchorros Ir a chinchorros
</Link> </Link>
</div> </div>
</section> </section>

47
frontend/src/pages/restaurantes/index.tsx
View File

@ -90,15 +90,15 @@ export default function RestaurantsPage() {
setFeedback( setFeedback(
result.added result.added
? `Chinchorro guardado en “${activeList?.name || 'Mi chinchorreo'}”.` ? `Ese chinchorro se guardó en “${activeList?.name || 'Mi chinchorreo'}”.`
: 'Ese chinchorro ya estaba en la lista activa.', : 'Ese chinchorro ya lo tenías en la lista activa.',
); );
}; };
return ( return (
<> <>
<Head> <Head>
<title>Chinchorreo PR | Restaurantes & Chinchorros</title> <title>Chinchorreo PR | Chinchorros</title>
</Head> </Head>
<PublicShell activeSection="restaurantes"> <PublicShell activeSection="restaurantes">
@ -106,14 +106,13 @@ export default function RestaurantsPage() {
<div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between"> <div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
<div className="max-w-3xl"> <div className="max-w-3xl">
<div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]"> <div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">
Restaurantes & Chinchorros Chinchorros
</div> </div>
<h1 className="mt-2 text-4xl font-black tracking-tight text-white"> <h1 className="mt-2 text-4xl font-black tracking-tight text-white">
Filtra por región, ambiente y antojo Encuentra un chinchorro según el antojo y el ambiente
</h1> </h1>
<p className="mt-3 text-base leading-7 text-slate-300"> <p className="mt-3 text-base leading-7 text-slate-300">
Desde Piñones hasta La Parguera, aquí tienes una lista buscable con especialidades, Desde Piñones hasta La Parguera, aquí buscas por zona, ambiente o antojo y guardas los chinchorros que quieres repetir.
redes, mapas y favoritos guardados localmente.
</p> </p>
</div> </div>
<button <button
@ -134,25 +133,25 @@ export default function RestaurantsPage() {
<div className="mt-6 grid gap-4 rounded-[1.8rem] border border-white/10 bg-[#04111f]/50 p-4 md:grid-cols-2 xl:grid-cols-5"> <div className="mt-6 grid gap-4 rounded-[1.8rem] border border-white/10 bg-[#04111f]/50 p-4 md:grid-cols-2 xl:grid-cols-5">
<label className="block xl:col-span-2"> <label className="block xl:col-span-2">
<div className="mb-2 text-xs font-semibold uppercase tracking-[0.25em] text-slate-400"> <div className="mb-2 text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">
Buscar Busca un chinchorro
</div> </div>
<input <input
value={searchValue} value={searchValue}
onChange={(event) => setSearchValue(event.target.value)} onChange={(event) => setSearchValue(event.target.value)}
placeholder="Piñones, lechonera, longaniza, Luquillo..." placeholder="Piñones, lechonera, fritura o Luquillo..."
className="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder:text-slate-400 focus:border-[#DAA520] focus:outline-none focus:ring-0" className="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder:text-slate-400 focus:border-[#DAA520] focus:outline-none focus:ring-0"
/> />
</label> </label>
{[ {[
{ {
title: 'Región', title: 'Zona',
value: selectedRegion, value: selectedRegion,
options: ['Todas', ...regionOptions], options: ['Todas', ...regionOptions],
onChange: setSelectedRegion, onChange: setSelectedRegion,
}, },
{ {
title: 'Tipo', title: 'Tipo de chinchorro',
value: selectedType, value: selectedType,
options: ['Todas', ...typeOptions], options: ['Todas', ...typeOptions],
onChange: setSelectedType, onChange: setSelectedType,
@ -164,7 +163,7 @@ export default function RestaurantsPage() {
onChange: setSelectedVibe, onChange: setSelectedVibe,
}, },
{ {
title: 'Precio', title: 'Presupuesto',
value: selectedPrice, value: selectedPrice,
options: ['Todas', ...priceOptions], options: ['Todas', ...priceOptions],
onChange: setSelectedPrice, onChange: setSelectedPrice,
@ -200,10 +199,10 @@ export default function RestaurantsPage() {
: 'border-white/10 bg-white/5 text-white hover:border-white/20 hover:bg-white/10', : 'border-white/10 bg-white/5 text-white hover:border-white/20 hover:bg-white/10',
].join(' ')} ].join(' ')}
> >
Abierto ahora {openNowOnly ? '✓' : ''} Solo abiertos ahora {openNowOnly ? '✓' : ''}
</button> </button>
<div className="rounded-full border border-white/10 bg-white/5 px-4 py-2"> <div className="rounded-full border border-white/10 bg-white/5 px-4 py-2">
{filteredChinchorros.length} chinchorros encontrados {filteredChinchorros.length} chinchorros para este plan
</div> </div>
{feedback ? ( {feedback ? (
<div className="inline-flex items-center gap-2 rounded-full border border-[#228B22]/30 bg-[#228B22]/10 px-4 py-2 text-[#A7F3D0]"> <div className="inline-flex items-center gap-2 rounded-full border border-[#228B22]/30 bg-[#228B22]/10 px-4 py-2 text-[#A7F3D0]">
@ -261,26 +260,26 @@ export default function RestaurantsPage() {
: 'border-white/10 bg-white/5 text-slate-300', : 'border-white/10 bg-white/5 text-slate-300',
].join(' ')} ].join(' ')}
> >
{chinchorro.openNow ? 'Abierto ahora' : 'Abre luego'} {chinchorro.openNow ? 'Abierto ahora' : 'Cerrado ahora'}
</div> </div>
</div> </div>
<div className="grid gap-3 sm:grid-cols-2"> <div className="grid gap-3 sm:grid-cols-2">
<div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300"> <div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300">
<div className="text-xs uppercase tracking-[0.2em] text-slate-500">Dirección</div> <div className="text-xs uppercase tracking-[0.2em] text-slate-500">Dónde queda</div>
<div className="mt-2 flex items-start gap-2 text-white"> <div className="mt-2 flex items-start gap-2 text-white">
<BaseIcon path={mdiMapMarker} size={16} className="mt-0.5" /> <BaseIcon path={mdiMapMarker} size={16} className="mt-0.5" />
<span>{chinchorro.address}</span> <span>{chinchorro.address}</span>
</div> </div>
</div> </div>
<div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300"> <div className="rounded-[1.4rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-300">
<div className="text-xs uppercase tracking-[0.2em] text-slate-500">Horario</div> <div className="text-xs uppercase tracking-[0.2em] text-slate-500">Cuándo ir</div>
<div className="mt-2 text-white">{chinchorro.hours}</div> <div className="mt-2 text-white">{chinchorro.hours}</div>
</div> </div>
</div> </div>
<div> <div>
<div className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">Especialidades</div> <div className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">Qué pedir</div>
<div className="mt-3 flex flex-wrap gap-2"> <div className="mt-3 flex flex-wrap gap-2">
{chinchorro.specialties.map((specialty) => ( {chinchorro.specialties.map((specialty) => (
<span <span
@ -294,7 +293,7 @@ export default function RestaurantsPage() {
</div> </div>
<div> <div>
<div className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">Galería de platos</div> <div className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">Se antoja pedir</div>
<div className="mt-3 grid gap-3 sm:grid-cols-3"> <div className="mt-3 grid gap-3 sm:grid-cols-3">
{chinchorro.dishGallery.map((dish) => ( {chinchorro.dishGallery.map((dish) => (
<div <div
@ -353,7 +352,7 @@ export default function RestaurantsPage() {
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/10"
> >
<BaseIcon path={mdiOpenInNew} size={16} /> <BaseIcon path={mdiOpenInNew} size={16} />
Google Maps Abrir en Maps
</a> </a>
<button <button
type="button" type="button"
@ -373,14 +372,14 @@ export default function RestaurantsPage() {
].join(' ')} ].join(' ')}
> >
<BaseIcon path={mdiStarOutline} size={16} /> <BaseIcon path={mdiStarOutline} size={16} />
{saved ? 'Chinchorro guardado' : 'Guardar chinchorro'} {saved ? 'Ya guardado' : 'Guardar'}
</button> </button>
{chinchorro.routeSlug ? ( {chinchorro.routeSlug ? (
<Link <Link
href={`/rutas/${chinchorro.routeSlug}`} href={`/rutas/${chinchorro.routeSlug}`}
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-transparent px-4 py-2 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/5" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-transparent px-4 py-2 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/5"
> >
Ver ruta Abrir ruta
<BaseIcon path={mdiChevronRight} size={16} /> <BaseIcon path={mdiChevronRight} size={16} />
</Link> </Link>
) : null} ) : null}
@ -393,9 +392,9 @@ export default function RestaurantsPage() {
{!filteredChinchorros.length ? ( {!filteredChinchorros.length ? (
<section className="rounded-[2rem] border border-dashed border-white/15 bg-white/5 p-10 text-center shadow-xl shadow-black/20"> <section className="rounded-[2rem] border border-dashed border-white/15 bg-white/5 p-10 text-center shadow-xl shadow-black/20">
<h2 className="text-2xl font-black text-white">Con esos filtros no salió ningún chinchorro</h2> <h2 className="text-2xl font-black text-white">No encontramos ningún chinchorro con esos filtros</h2>
<p className="mt-3 text-sm leading-6 text-slate-300"> <p className="mt-3 text-sm leading-6 text-slate-300">
Prueba otro pueblo, quita “Abierto ahora” o cambia la región para ver más opciones. Prueba otra zona, cambia el presupuesto o quita “Solo abiertos ahora”.
</p> </p>
</section> </section>
) : null} ) : null}

36
frontend/src/pages/rutas/[slug].tsx
View File

@ -61,7 +61,7 @@ export default function RouteDetailPage() {
href="/rutas" href="/rutas"
className="mt-5 inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f]" className="mt-5 inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f]"
> >
Volver a rutas Regresar a rutas
<BaseIcon path={mdiChevronRight} size={16} /> <BaseIcon path={mdiChevronRight} size={16} />
</Link> </Link>
</section> </section>
@ -85,14 +85,14 @@ export default function RouteDetailPage() {
setFeedback( setFeedback(
result.added result.added
? `Ruta guardada en “${activeList?.name || 'Mi chinchorreo'}”.` ? `Esa ruta se guardó en “${activeList?.name || 'Mi chinchorreo'}”.`
: 'Esta ruta ya está guardada en tu lista activa.', : 'Esa ruta ya estaba en tu lista activa.',
); );
}; };
const handleToggleStop = (stopId: string) => { const handleToggleStop = (stopId: string) => {
const result = toggleRouteStop(route.slug, stopId); const result = toggleRouteStop(route.slug, stopId);
setFeedback(result.completed ? 'Parada marcada como completada ✅' : 'Parada marcada como pendiente.'); setFeedback(result.completed ? 'Parada marcada como hecha ✅' : 'La parada volvió a quedar pendiente.');
}; };
return ( return (
@ -114,7 +114,7 @@ export default function RouteDetailPage() {
<div className="relative grid gap-8 lg:grid-cols-[1.05fr_0.95fr] lg:items-end"> <div className="relative grid gap-8 lg:grid-cols-[1.05fr_0.95fr] lg:items-end">
<div> <div>
<Link href="/rutas" className="inline-flex items-center gap-2 text-sm font-semibold text-slate-200"> <Link href="/rutas" className="inline-flex items-center gap-2 text-sm font-semibold text-slate-200">
← Volver a rutas ← Regresar a rutas
</Link> </Link>
<div className="mt-4 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]"> <div className="mt-4 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">
{route.emoji} {route.region} {route.emoji} {route.region}
@ -143,7 +143,7 @@ export default function RouteDetailPage() {
className="inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f] transition hover:bg-slate-100" className="inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f] transition hover:bg-slate-100"
> >
<BaseIcon path={mdiCompassOutline} size={16} /> <BaseIcon path={mdiCompassOutline} size={16} />
Abrir navegación Abrir en Maps
</a> </a>
<button <button
type="button" type="button"
@ -156,7 +156,7 @@ export default function RouteDetailPage() {
].join(' ')} ].join(' ')}
> >
<BaseIcon path={mdiStarOutline} size={16} /> <BaseIcon path={mdiStarOutline} size={16} />
{saved ? 'Ruta guardada' : 'Guardar ruta'} {saved ? 'Ya guardada' : 'Guardar'}
</button> </button>
<button <button
type="button" type="button"
@ -164,7 +164,7 @@ export default function RouteDetailPage() {
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/10 px-5 py-3 text-sm font-bold text-white transition hover:border-white/20 hover:bg-white/15" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/10 px-5 py-3 text-sm font-bold text-white transition hover:border-white/20 hover:bg-white/15"
> >
<BaseIcon path={mdiShareVariantOutline} size={16} /> <BaseIcon path={mdiShareVariantOutline} size={16} />
Compartir ruta Compartir
</button> </button>
</div> </div>
</div> </div>
@ -186,9 +186,9 @@ export default function RouteDetailPage() {
</p> </p>
</div> </div>
<div className="rounded-[1.5rem] border border-white/10 bg-[#04111f]/60 px-4 py-3 text-sm text-slate-200"> <div className="rounded-[1.5rem] border border-white/10 bg-[#04111f]/60 px-4 py-3 text-sm text-slate-200">
<div className="font-semibold text-white">{progress}% completado</div> <div className="font-semibold text-white">Llevas {progress}%</div>
<div className="mt-1 text-slate-400"> <div className="mt-1 text-slate-400">
{completedStops.length} de {route.stops.length} paradas hechas {completedStops.length} de {route.stops.length} ya hechas
</div> </div>
</div> </div>
</div> </div>
@ -229,21 +229,21 @@ export default function RouteDetailPage() {
</div> </div>
<div className="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-sm font-semibold text-slate-200"> <div className="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-sm font-semibold text-slate-200">
<BaseIcon path={mdiCheckCircleOutline} size={16} /> <BaseIcon path={mdiCheckCircleOutline} size={16} />
{completed ? 'Completada' : 'Marcar parada'} {completed ? 'Ya está hecha' : 'Marcar parada'}
</div> </div>
</div> </div>
<div className="mt-5 grid gap-3 md:grid-cols-3"> <div className="mt-5 grid gap-3 md:grid-cols-3">
<div className="rounded-[1.4rem] border border-white/10 bg-white/5 p-4"> <div className="rounded-[1.4rem] border border-white/10 bg-white/5 p-4">
<div className="text-xs uppercase tracking-[0.25em] text-slate-400">Especialidad</div> <div className="text-xs uppercase tracking-[0.25em] text-slate-400">Prueba esto</div>
<div className="mt-2 text-sm font-semibold text-white">{stop.specialty}</div> <div className="mt-2 text-sm font-semibold text-white">{stop.specialty}</div>
</div> </div>
<div className="rounded-[1.4rem] border border-white/10 bg-white/5 p-4"> <div className="rounded-[1.4rem] border border-white/10 bg-white/5 p-4">
<div className="text-xs uppercase tracking-[0.25em] text-slate-400">Horario aprox.</div> <div className="text-xs uppercase tracking-[0.25em] text-slate-400">Mejor momento</div>
<div className="mt-2 text-sm font-semibold text-white">{stop.hours}</div> <div className="mt-2 text-sm font-semibold text-white">{stop.hours}</div>
</div> </div>
<div className="rounded-[1.4rem] border border-white/10 bg-white/5 p-4"> <div className="rounded-[1.4rem] border border-white/10 bg-white/5 p-4">
<div className="text-xs uppercase tracking-[0.25em] text-slate-400">Quédate</div> <div className="text-xs uppercase tracking-[0.25em] text-slate-400">Quédate un rato</div>
<div className="mt-2 text-sm font-semibold text-white">{stop.recommendedStay}</div> <div className="mt-2 text-sm font-semibold text-white">{stop.recommendedStay}</div>
</div> </div>
</div> </div>
@ -256,23 +256,23 @@ export default function RouteDetailPage() {
<div className="space-y-6"> <div className="space-y-6">
<div className="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl shadow-black/20"> <div className="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl shadow-black/20">
<div className="text-xs font-bold uppercase tracking-[0.35em] text-[#A7F3D0]"> <div className="text-xs font-bold uppercase tracking-[0.35em] text-[#A7F3D0]">
Tu ritmo ideal Hazla con calma
</div> </div>
<div className="mt-3 flex items-center gap-3 text-white"> <div className="mt-3 flex items-center gap-3 text-white">
<BaseIcon path={mdiClockOutline} size={18} /> <BaseIcon path={mdiClockOutline} size={18} />
<div> <div>
<div className="text-xl font-black">{route.estimatedMinutes} minutos estimados</div> <div className="text-xl font-black">Más o menos {route.estimatedMinutes} min</div>
<div className="text-sm text-slate-300">Planifica entre 3 y 5 horas para disfrutarla completa.</div> <div className="text-sm text-slate-300">Planifica entre 3 y 5 horas para disfrutarla completa.</div>
</div> </div>
</div> </div>
<div className="mt-5 rounded-[1.5rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm leading-6 text-slate-300"> <div className="mt-5 rounded-[1.5rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm leading-6 text-slate-300">
{feedback || `Tu lista activa ahora mismo es “${activeList?.name || 'Mi chinchorreo'}”.`} {feedback || `Ahora mismo estás guardando en “${activeList?.name || 'Mi chinchorreo'}”.`}
</div> </div>
<Link <Link
href="/mis-favoritos" href="/mis-favoritos"
className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-[#FDE68A]" className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-[#FDE68A]"
> >
Abrir favoritos Ir a favoritos
<BaseIcon path={mdiChevronRight} size={16} /> <BaseIcon path={mdiChevronRight} size={16} />
</Link> </Link>
</div> </div>

51
frontend/src/pages/rutas/index.tsx
View File

@ -86,8 +86,8 @@ export default function RoutesPage() {
setFeedback( setFeedback(
result.added result.added
? `Ruta guardada en “${activeList?.name || 'Mi chinchorreo'}”.` ? `Esa ruta se guardó en “${activeList?.name || 'Mi chinchorreo'}”.`
: 'Esta ruta ya estaba guardada en tu lista activa.', : 'Esa ruta ya estaba en tu lista activa.',
); );
}; };
@ -100,7 +100,7 @@ export default function RoutesPage() {
<PublicShell <PublicShell
activeSection="rutas" activeSection="rutas"
floatingAction={{ floatingAction={{
label: 'Sorpréndeme con otra ruta', label: 'Dame otra ruta',
icon: mdiDice5Outline, icon: mdiDice5Outline,
onClick: handleRandomRoute, onClick: handleRandomRoute,
}} }}
@ -110,18 +110,17 @@ export default function RoutesPage() {
<div className="max-w-3xl"> <div className="max-w-3xl">
<div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">Rutas</div> <div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">Rutas</div>
<h1 className="mt-2 text-4xl font-black tracking-tight text-white"> <h1 className="mt-2 text-4xl font-black tracking-tight text-white">
Explora la isla parada por parada Rutas para irte de parada en parada
</h1> </h1>
<p className="mt-3 text-base leading-7 text-slate-300"> <p className="mt-3 text-base leading-7 text-slate-300">
Aquí puedes descubrir rutas populares, ver sus paradas en orden, Descubre recorridos ya armados, mira cada parada en orden y guarda los que mejor van con tu plan.
iniciar navegación y guardarlas en una lista personalizada.
</p> </p>
</div> </div>
<div className="rounded-[1.75rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-200"> <div className="rounded-[1.75rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-200">
<div className="font-semibold text-white">Lista activa</div> <div className="font-semibold text-white">Tu lista activa</div>
<div className="mt-1 text-[#FDE68A]">{activeList?.name || 'Mi chinchorreo'}</div> <div className="mt-1 text-[#FDE68A]">{activeList?.name || 'Mi chinchorreo'}</div>
<Link href="/mis-favoritos" className="mt-3 inline-flex items-center gap-2 text-sm font-semibold text-[#A7F3D0]"> <Link href="/mis-favoritos" className="mt-3 inline-flex items-center gap-2 text-sm font-semibold text-[#A7F3D0]">
Abrir favoritos Ir a favoritos
<BaseIcon path={mdiChevronRight} size={16} /> <BaseIcon path={mdiChevronRight} size={16} />
</Link> </Link>
</div> </div>
@ -130,30 +129,30 @@ export default function RoutesPage() {
<div className="mt-6 grid gap-4 rounded-[1.8rem] border border-white/10 bg-[#04111f]/50 p-4 md:grid-cols-[2fr_1fr_1fr] lg:grid-cols-[2fr_1fr_1fr_1fr]"> <div className="mt-6 grid gap-4 rounded-[1.8rem] border border-white/10 bg-[#04111f]/50 p-4 md:grid-cols-[2fr_1fr_1fr] lg:grid-cols-[2fr_1fr_1fr_1fr]">
<label className="block"> <label className="block">
<div className="mb-2 text-xs font-semibold uppercase tracking-[0.25em] text-slate-400"> <div className="mb-2 text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">
Buscar ruta Busca una ruta
</div> </div>
<input <input
value={searchValue} value={searchValue}
onChange={(event) => setSearchValue(event.target.value)} onChange={(event) => setSearchValue(event.target.value)}
placeholder="Arecibo, montaña, mariscos, Guavate..." placeholder="Arecibo, Guavate, mariscos o montaña..."
className="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder:text-slate-400 focus:border-[#DAA520] focus:outline-none focus:ring-0" className="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder:text-slate-400 focus:border-[#DAA520] focus:outline-none focus:ring-0"
/> />
</label> </label>
{[{ {[{
title: 'Región', title: 'Zona',
value: selectedRegion, value: selectedRegion,
options: regionFilters, options: regionFilters,
onChange: setSelectedRegion, onChange: setSelectedRegion,
}, },
{ {
title: 'Dificultad', title: 'Ritmo',
value: selectedDifficulty, value: selectedDifficulty,
options: difficultyFilters, options: difficultyFilters,
onChange: setSelectedDifficulty, onChange: setSelectedDifficulty,
}, },
{ {
title: 'Etiqueta', title: 'Plan',
value: selectedTag, value: selectedTag,
options: tagFilters, options: tagFilters,
onChange: setSelectedTag, onChange: setSelectedTag,
@ -180,7 +179,7 @@ export default function RoutesPage() {
<div className="mt-4 flex flex-wrap items-center gap-3 text-sm text-slate-300"> <div className="mt-4 flex flex-wrap items-center gap-3 text-sm text-slate-300">
<div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2"> <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2">
<BaseIcon path={mdiFilterVariant} size={16} /> <BaseIcon path={mdiFilterVariant} size={16} />
{filteredRoutes.length} rutas que van con tu plan {filteredRoutes.length} rutas para este plan
</div> </div>
{feedback ? ( {feedback ? (
<div className="inline-flex items-center gap-2 rounded-full border border-[#228B22]/30 bg-[#228B22]/10 px-3 py-2 text-[#A7F3D0]"> <div className="inline-flex items-center gap-2 rounded-full border border-[#228B22]/30 bg-[#228B22]/10 px-3 py-2 text-[#A7F3D0]">
@ -215,7 +214,7 @@ export default function RoutesPage() {
<div className="font-semibold text-white">{route.bestFor}</div> <div className="font-semibold text-white">{route.bestFor}</div>
<div className="mt-2 flex items-center gap-2 text-slate-300"> <div className="mt-2 flex items-center gap-2 text-slate-300">
<BaseIcon path={mdiClockOutline} size={16} /> <BaseIcon path={mdiClockOutline} size={16} />
{route.estimatedMinutes} min estimados Aprox. {route.estimatedMinutes} min
</div> </div>
</div> </div>
</div> </div>
@ -233,15 +232,15 @@ export default function RoutesPage() {
<div className="mt-6 grid gap-3 md:grid-cols-3"> <div className="mt-6 grid gap-3 md:grid-cols-3">
<div className="rounded-[1.5rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-200"> <div className="rounded-[1.5rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-200">
<div className="text-xs uppercase tracking-[0.25em] text-slate-400">Paradas</div> <div className="text-xs uppercase tracking-[0.25em] text-slate-400">Paradas clave</div>
<div className="mt-2 text-2xl font-black text-white">{route.stops.length}</div> <div className="mt-2 text-2xl font-black text-white">{route.stops.length}</div>
</div> </div>
<div className="rounded-[1.5rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-200"> <div className="rounded-[1.5rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-200">
<div className="text-xs uppercase tracking-[0.25em] text-slate-400">Dificultad</div> <div className="text-xs uppercase tracking-[0.25em] text-slate-400">Ritmo</div>
<div className="mt-2 text-xl font-black text-white">{route.difficulty}</div> <div className="mt-2 text-xl font-black text-white">{route.difficulty}</div>
</div> </div>
<div className="rounded-[1.5rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-200"> <div className="rounded-[1.5rem] border border-white/10 bg-[#04111f]/60 p-4 text-sm text-slate-200">
<div className="text-xs uppercase tracking-[0.25em] text-slate-400">Ideal para</div> <div className="text-xs uppercase tracking-[0.25em] text-slate-400">Buen plan para</div>
<div className="mt-2 text-sm font-semibold text-white">{route.bestFor}</div> <div className="mt-2 text-sm font-semibold text-white">{route.bestFor}</div>
</div> </div>
</div> </div>
@ -251,7 +250,7 @@ export default function RoutesPage() {
href={`/rutas/${route.slug}`} href={`/rutas/${route.slug}`}
className="inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f] transition hover:bg-slate-100" className="inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f] transition hover:bg-slate-100"
> >
Ver ruta Abrir ruta
<BaseIcon path={mdiChevronRight} size={16} /> <BaseIcon path={mdiChevronRight} size={16} />
</Link> </Link>
<a <a
@ -261,7 +260,7 @@ export default function RoutesPage() {
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-5 py-3 text-sm font-bold text-white transition hover:border-white/20 hover:bg-white/10" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-5 py-3 text-sm font-bold text-white transition hover:border-white/20 hover:bg-white/10"
> >
<BaseIcon path={mdiCompassOutline} size={16} /> <BaseIcon path={mdiCompassOutline} size={16} />
Navegar Abrir en Maps
</a> </a>
<button <button
type="button" type="button"
@ -274,7 +273,7 @@ export default function RoutesPage() {
].join(' ')} ].join(' ')}
> >
<BaseIcon path={mdiStarOutline} size={16} /> <BaseIcon path={mdiStarOutline} size={16} />
{saved ? 'Ruta guardada' : 'Guardar ruta'} {saved ? 'Ya guardada' : 'Guardar'}
</button> </button>
<button <button
type="button" type="button"
@ -283,7 +282,7 @@ export default function RoutesPage() {
} }
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-transparent px-5 py-3 text-sm font-bold text-slate-200 transition hover:border-white/20 hover:bg-white/5" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-transparent px-5 py-3 text-sm font-bold text-slate-200 transition hover:border-white/20 hover:bg-white/5"
> >
Compartir ruta Compartir
</button> </button>
</div> </div>
</div> </div>
@ -294,9 +293,9 @@ export default function RoutesPage() {
{!filteredRoutes.length ? ( {!filteredRoutes.length ? (
<section className="rounded-[2rem] border border-dashed border-white/15 bg-white/5 p-10 text-center shadow-xl shadow-black/20"> <section className="rounded-[2rem] border border-dashed border-white/15 bg-white/5 p-10 text-center shadow-xl shadow-black/20">
<h2 className="text-2xl font-black text-white">Con esos filtros no salió ninguna ruta</h2> <h2 className="text-2xl font-black text-white">No encontramos ninguna ruta con esos filtros</h2>
<p className="mt-3 text-sm leading-6 text-slate-300"> <p className="mt-3 text-sm leading-6 text-slate-300">
Quita una etiqueta, cambia la dificultad o dale a “Sorpréndeme” para que aparezca otra opción. Prueba otra zona o ritmo, o dale a “Dame otra ruta” para ver una distinta.
</p> </p>
<div className="mt-5 flex flex-wrap items-center justify-center gap-3"> <div className="mt-5 flex flex-wrap items-center justify-center gap-3">
<button <button
@ -309,14 +308,14 @@ export default function RoutesPage() {
}} }}
className="rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f]" className="rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f]"
> >
Limpiar filtros Quitar filtros
</button> </button>
<button <button
type="button" type="button"
onClick={handleRandomRoute} onClick={handleRandomRoute}
className="rounded-full border border-white/10 bg-white/5 px-5 py-3 text-sm font-bold text-white" className="rounded-full border border-white/10 bg-white/5 px-5 py-3 text-sm font-bold text-white"
> >
Sorpréndeme Dame otra ruta
</button> </button>
</div> </div>
</section> </section>

12
frontend/src/pages/tips/index.tsx
View File

@ -28,20 +28,20 @@ export default function TipsPage() {
return ( return (
<> <>
<Head> <Head>
<title>Chinchorreo PR | Tips & Guía del Viajero</title> <title>Chinchorreo PR | Tips</title>
</Head> </Head>
<PublicShell activeSection="tips"> <PublicShell activeSection="tips">
<section className="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]"> <section className="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
<div className="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl shadow-black/20 sm:p-8"> <div className="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl shadow-black/20 sm:p-8">
<div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]"> <div className="text-xs font-bold uppercase tracking-[0.35em] text-[#FDE68A]">
Tips & Guía del viajero Tips
</div> </div>
<h1 className="mt-2 text-4xl font-black tracking-tight text-white"> <h1 className="mt-2 text-4xl font-black tracking-tight text-white">
Consejos prácticos para chinchorrear con calma y responsabilidad Consejos para salir a chinchorrear con calma y buen juicio
</h1> </h1>
<p className="mt-3 max-w-2xl text-base leading-7 text-slate-300"> <p className="mt-3 max-w-2xl text-base leading-7 text-slate-300">
Una guía educativa para salir mejor preparado, comer mejor y respetar cada lugar que visitas. Una guía sencilla para comer mejor, moverte con tiempo y cuidar cada parada que visites.
</p> </p>
<div className="mt-6 rounded-[1.9rem] border border-[#DAA520]/20 bg-gradient-to-br from-[#DAA520]/10 via-white/5 to-transparent p-6"> <div className="mt-6 rounded-[1.9rem] border border-[#DAA520]/20 bg-gradient-to-br from-[#DAA520]/10 via-white/5 to-transparent p-6">
@ -58,7 +58,7 @@ export default function TipsPage() {
onClick={() => setTipIndex((current) => current + 1)} onClick={() => setTipIndex((current) => current + 1)}
className="mt-5 inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f]" className="mt-5 inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-bold text-[#04111f]"
> >
Dame otro tip Quiero otro tip
<BaseIcon path={mdiChevronRight} size={16} /> <BaseIcon path={mdiChevronRight} size={16} />
</button> </button>
</div> </div>
@ -81,7 +81,7 @@ export default function TipsPage() {
href="/rutas" href="/rutas"
className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-[#FDE68A]" className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-[#FDE68A]"
> >
Ver rutas y poner estos tips en práctica Ir a rutas y ponerlos en práctica
<BaseIcon path={mdiChevronRight} size={16} /> <BaseIcon path={mdiChevronRight} size={16} />
</Link> </Link>
</div> </div>