{{ item.title }}
+ @if (item.subtitle) {{{ item.subtitle }}
} + @if (item.date_text) {{{ item.date_text }}
} + @if (item.location) {{{ item.location }}
} + @if (item.description) {{{ item.description }}
} +{{ event().subtitle }}
+ } + @if (event().date_text) { + + } + @if (event().location) { + + } +{{ item.subtitle }}
} + @if (item.date_text) {{{ item.date_text }}
} + @if (item.location) {{{ item.location }}
} + @if (item.description) {{{ item.description }}
} +No encontramos este evento.
+} diff --git a/src/app/features/store/pages/event-detail-page/event-detail-page.component.scss b/src/app/features/store/pages/event-detail-page/event-detail-page.component.scss new file mode 100644 index 0000000..5d770f9 --- /dev/null +++ b/src/app/features/store/pages/event-detail-page/event-detail-page.component.scss @@ -0,0 +1,8 @@ +.event-detail__back { display: inline-block; margin-bottom: 2rem; color: var(--tenant-primary); } +.event-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); } +.event-detail__image { aspect-ratio: 1.43; background: #e5e6e7; } +.event-detail__image img { width: 100%; height: 100%; object-fit: cover; display: block; } +.event-detail__content h1 { font-size: clamp(1.7rem, 3vw, 2.8rem); text-transform: uppercase; } +.event-detail__subtitle { color: #63666a; } +.event-detail__description { margin-top: 2rem; white-space: pre-line; } +@media (max-width: 767.98px) { .event-detail { grid-template-columns: 1fr; } } diff --git a/src/app/features/store/pages/event-detail-page/event-detail-page.component.ts b/src/app/features/store/pages/event-detail-page/event-detail-page.component.ts new file mode 100644 index 0000000..6d01bc0 --- /dev/null +++ b/src/app/features/store/pages/event-detail-page/event-detail-page.component.ts @@ -0,0 +1,35 @@ +import { ChangeDetectionStrategy, Component, DestroyRef, inject, signal } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { ActivatedRoute, RouterLink } from '@angular/router'; +import { catchError, map, of, switchMap } from 'rxjs'; + +import { EventService } from '../../../../core/services/event/event.service'; +import { StoreEvent } from '../../../../core/services/event/event.interface'; + +@Component({ + selector: 'app-event-detail-page', + imports: [RouterLink], + templateUrl: './event-detail-page.component.html', + styleUrl: './event-detail-page.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class EventDetailPageComponent { + private readonly route = inject(ActivatedRoute); + private readonly events = inject(EventService); + private readonly destroyRef = inject(DestroyRef); + protected readonly event = signal