syntaxbullet/bmp-website-2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update EventDetail styles and remove subscription functionality

Browse Source
This commit is contained in:
syntaxbullet
2026-07-13 20:54:05 +02:00
parent 63387ce335
commit ae76a32e99
1 changed files with 6 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/spa/pages/EventDetail.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import React from 'react'
import { useParams, Link } from '@/spa/router'
import { motion } from 'framer-motion'
import { Calendar, MapPin, Clock, Bell, BellOff, ArrowLeft, ChevronRight } from 'lucide-react'
import { Calendar, MapPin, Clock, Bell, ArrowLeft, ChevronRight } from 'lucide-react'
import { getEventBySlug, EventUpdate, type BmpEvent, type EventEckdaten } from '@/spa/data/events'
import { useCmsRoute } from '@/spa/cmsRoute'
import { docImageUrl, mediaUrl } from '@/spa/cmsMediaField'
@@ -11,7 +11,7 @@ import Image from '@/spa/components/ui/UnoptimizedImage'
const NAVY = '#111D55'
const GOLD = '#EFBF04'
const CREAM = '#EFE5E3'
const WHITE = '#fff'
type EventDetailCms = Omit<Partial<typeof eventDetailContent>, 'updateStyles' | 'statusStyles'> & {
fallbackImage?: unknown
@@ -124,12 +124,11 @@ export default function EventDetail() {
const sections = detail.sections || eventDetailContent.sections
const updatesCopy = detail.updatesCopy || eventDetailContent.updates
const bottomCta = detail.bottomCta || eventDetailContent.bottomCta
const [subscribed, setSubscribed] = useState(false)
const isMobile = useIsMobile()
if (!event) {
return (
<div style={{ paddingTop: 60, minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: CREAM, flexDirection: 'column', gap: 24 }}>
<div style={{ paddingTop: 60, minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: WHITE, flexDirection: 'column', gap: 24 }}>
<div style={{ fontSize: 64, fontWeight: 900, color: `${NAVY}20`, letterSpacing: '-0.04em' }}>404</div>
<div style={{ fontSize: 20, fontWeight: 700, color: NAVY }}>{fallbackText(notFound.title, eventDetailContent.notFound.title)}</div>
<Link to={fallbackText(notFound.backUrl, eventDetailContent.notFound.backUrl)} style={{ fontSize: 15, color: NAVY, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6, fontWeight: 600, borderBottom: `2px solid ${GOLD}`, paddingBottom: 2 }}>
@@ -143,7 +142,7 @@ export default function EventDetail() {
const statusStyle = statusStyles[event.status] ?? statusStyles.geplant
return (
<div style={{ paddingTop: 60, background: CREAM, minHeight: '100vh', fontFamily: '"Inter", sans-serif' }}>
<div style={{ paddingTop: 60, background: WHITE, minHeight: '100vh', fontFamily: '"Inter", sans-serif' }}>
{/* ── Hero ─────────────────────────────────────────────────────────── */}
<section style={{ position: 'relative', height: isMobile ? 'auto' : '65vh', minHeight: isMobile ? 520 : 480, overflow: 'hidden' }}>
@@ -275,7 +274,7 @@ export default function EventDetail() {
{/* Right – Live Updates Feed (sticky on desktop, static on mobile) */}
<div style={isMobile ? undefined : { position: 'sticky', top: 80 }}>
{/* Header */}
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 20 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<Bell size={18} color={NAVY} />
<span style={{ fontSize: 17, fontWeight: 800, color: NAVY, fontFamily: '"IBM Plex Sans", sans-serif' }}>
@@ -286,32 +285,8 @@ export default function EventDetail() {
borderRadius: 20, padding: '2px 8px',
}}>{event.updates.length}</span>
</div>
<button
onClick={() => setSubscribed(s => !s)}
style={{
display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer',
background: subscribed ? NAVY : 'transparent',
color: subscribed ? GOLD : NAVY,
border: `1.5px solid ${NAVY}`, borderRadius: 8,
padding: '8px 14px', fontSize: 12, fontWeight: 700,
transition: 'all 0.2s', fontFamily: 'inherit',
}}
>
{subscribed ? <><BellOff size={13} /> {fallbackText(updatesCopy.unsubscribeLabel, eventDetailContent.updates.unsubscribeLabel)}</> : <><Bell size={13} /> {fallbackText(updatesCopy.subscribeLabel, eventDetailContent.updates.subscribeLabel)}</>}
</button>
</div>
{subscribed && (
<motion.div
initial={{ opacity: 0, y: -8 }}
animate={{ opacity: 1, y: 0 }}
style={{ background: '#ECFDF5', border: '1px solid #A7F3D0', borderRadius: 10, padding: '10px 14px', marginBottom: 16, fontSize: 14, color: '#065F46', fontWeight: 500 }}
>
{fallbackText(updatesCopy.subscribedMessage, eventDetailContent.updates.subscribedMessage)}
</motion.div>
)}
{/* Timeline */}
<div style={{ maxHeight: isMobile ? 'none' : 560, overflowY: isMobile ? 'visible' : 'auto', paddingRight: 4 }}>
{event.updates.map((update, i) => (