55 lines
2.6 KiB
React
55 lines
2.6 KiB
React
import React from 'react'
|
|
import { useParams, Link } from 'react-router-dom'
|
|
import { useContentItem } from '../hooks/useContent'
|
|
import { formatDate } from '../utils/formatDate'
|
|
import SEOHead from '../components/SEOHead'
|
|
|
|
export default function KniepunktIssue() {
|
|
const { slug } = useParams()
|
|
const issue = useContentItem('kniepunkt', slug)
|
|
|
|
if (!issue) {
|
|
return (
|
|
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
|
|
<SEOHead title="Kniepunkt-Ausgabe nicht gefunden" description="Die angeforderte Kniepunkt-Ausgabe wurde nicht gefunden." noindex url={`/kniepunkt/${slug}`} />
|
|
<div className="app-container" style={{ textAlign: 'center' }}>
|
|
<h1>Ausgabe nicht gefunden</h1>
|
|
<p style={{ color: 'var(--text-secondary)' }}>Diese Kniepunkt-Ausgabe existiert nicht.</p>
|
|
<Link to="/kniepunkt" className="secondary-button">Zurück zur Übersicht</Link>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
if (!issue.body) {
|
|
const loadFailed = issue.detailError
|
|
return (
|
|
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
|
|
<SEOHead title={issue.title} description={issue.summary || issue.title} url={`/kniepunkt/${issue.slug}`} type="article" image={issue.image} />
|
|
<div className="app-container" style={{ textAlign: 'center' }}>
|
|
<p role={loadFailed ? 'alert' : 'status'} aria-live={loadFailed ? 'assertive' : 'polite'}>
|
|
{loadFailed ? 'Die Kniepunkt-Ausgabe konnte nicht geladen werden.' : 'Kniepunkt-Ausgabe wird geladen …'}
|
|
</p>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
|
|
<SEOHead title={issue.title} description={issue.summary || issue.title} url={`/kniepunkt/${issue.slug}`} type="article" image={issue.image} />
|
|
<div className="app-container" style={{ maxWidth: '700px' }}>
|
|
<Link to="/kniepunkt" style={{ color: 'var(--text-secondary)', fontSize: '0.9rem', marginBottom: '24px', display: 'inline-block' }}>← Alle Ausgaben</Link>
|
|
<h1 style={{ marginBottom: '12px' }}>{issue.title}</h1>
|
|
<p style={{ color: 'var(--text-secondary)', marginBottom: '40px' }}>{formatDate(issue.date)}</p>
|
|
{issue.image && (
|
|
<div style={{ marginBottom: '40px', borderRadius: '12px', overflow: 'hidden', boxShadow: '0 8px 24px rgba(0,0,0,0.1)' }}>
|
|
<img src={issue.image} alt={issue.title} style={{ width: '100%', height: 'auto', display: 'block' }} />
|
|
</div>
|
|
)}
|
|
<div className="content-body" dangerouslySetInnerHTML={{ __html: issue.body }} />
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|