79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
/** WEB-0b: Übersicht der Webseiten-Seiten mit Status (Entwurf/Veröffentlicht). */
|
|
import { Link } from 'react-router-dom'
|
|
import { de } from '../strings/de'
|
|
import { listPages, type PageStatus } from '../api/pages'
|
|
import { useApi } from '../hooks/useApi'
|
|
import './webseite.css'
|
|
|
|
function StatusBadge({ status }: { status: PageStatus }) {
|
|
const t = de.pages.webseite
|
|
const published = status === 'Published'
|
|
return (
|
|
<span className={published ? 'status-badge status-badge--published' : 'status-badge status-badge--draft'}>
|
|
{published ? t.statusPublished : t.statusDraft}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export default function WebseitePage() {
|
|
const t = de.pages.webseite
|
|
const pages = useApi(() => listPages(), [])
|
|
|
|
if (pages.loading) return <p className="muted">{de.common.loading}</p>
|
|
if (pages.error || !pages.data) {
|
|
return (
|
|
<section className="page">
|
|
<h2>{t.title}</h2>
|
|
<div className="alert alert--error">
|
|
<span>{pages.error}</span>
|
|
<button type="button" className="btn" onClick={pages.reload}>
|
|
{de.common.retry}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<section className="page">
|
|
<header className="page-head">
|
|
<div>
|
|
<h2>{t.title}</h2>
|
|
<p className="muted">{t.intro}</p>
|
|
</div>
|
|
{/* WEB-3: lokale Vorschau der gerenderten Webseite */}
|
|
<div className="head-actions">
|
|
<Link to="/webseite/vorschau" className="btn btn--primary">
|
|
{t.vorschau.button}
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
{pages.data.length === 0 ? (
|
|
<p className="muted">{t.empty}</p>
|
|
) : (
|
|
<ul className="card-list">
|
|
{pages.data.map((p) => (
|
|
<li key={p.id} className="gerbil-card webseite-card">
|
|
<span className="gerbil-card__name">{p.title}</span>
|
|
<span className="gerbil-card__meta">/{p.slug}</span>
|
|
<span className="webseite-card__actions">
|
|
<StatusBadge status={p.status} />
|
|
{/* WEB-3: veröffentlichte Seiten direkt in der Vorschau öffnen */}
|
|
{p.status === 'Published' && (
|
|
<Link to={`/webseite/vorschau?seite=${encodeURIComponent(p.slug)}`} className="btn">
|
|
{t.vorschau.openPage}
|
|
</Link>
|
|
)}
|
|
<Link to={`/webseite/${p.slug}`} className="btn btn--primary">
|
|
{t.edit}
|
|
</Link>
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
)
|
|
}
|