57 lines
2.3 KiB
JavaScript
57 lines
2.3 KiB
JavaScript
import { Link } from 'react-router-dom'
|
|
import PublicLayout from '../../components/PublicLayout.jsx'
|
|
import PageHeader from '../../components/PageHeader.jsx'
|
|
import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
|
|
import { useAsync } from '../../lib/useAsync.js'
|
|
import { api } from '../../api/client.js'
|
|
|
|
const ROMAN = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII']
|
|
|
|
// Short blurbs for the seeded categories (the list endpoint returns title/slug only).
|
|
const BLURBS = {
|
|
'new-player-guide': 'First steps, basic survival, and early goals.',
|
|
'maps-atlas': 'Regions, towns, routes, and travel notes.',
|
|
systems: 'Shard mechanics and custom features.',
|
|
items: 'Equipment, treasures, rewards, and curiosities.',
|
|
monsters: 'Creatures, bosses, spawns, and dangers.',
|
|
crafting: 'Professions, materials, recipes, and tools.',
|
|
lore: 'Stories, places, factions, and mysteries.',
|
|
rules: 'Player conduct, shard expectations, and policies.',
|
|
}
|
|
|
|
export default function Wiki() {
|
|
const { loading, error, data } = useAsync(() => api.wiki())
|
|
const pages = data || []
|
|
|
|
return (
|
|
<PublicLayout section="wiki">
|
|
<div className="shell page-body">
|
|
<PageHeader
|
|
center
|
|
eyebrow="Knowledge base"
|
|
title="Mysticmoon Wiki"
|
|
lead="A calm starting point for shard guides, maps, systems, items, monsters, crafting, lore, and rules."
|
|
/>
|
|
{loading && <Loading />}
|
|
{error && <ErrorState message="Could not load the wiki right now." />}
|
|
{!loading && !error && pages.length === 0 && <EmptyState>No wiki pages yet.</EmptyState>}
|
|
<section className="grid-4">
|
|
{pages.map((p, i) => (
|
|
<Link key={p.slug} to={`/wiki/${p.slug}`} className="card" style={{ padding: 22 }}>
|
|
<span className="display" style={{ color: 'var(--accent)', fontSize: '1.4rem', marginBottom: 10 }}>
|
|
{ROMAN[i] || i + 1}
|
|
</span>
|
|
<h3 className="display" style={{ margin: '0 0 6px', fontSize: '1.1rem', color: 'var(--head)' }}>
|
|
{p.title}
|
|
</h3>
|
|
<p className="muted" style={{ margin: 0, fontSize: '0.92rem' }}>
|
|
{BLURBS[p.slug] || 'Open the guide →'}
|
|
</p>
|
|
</Link>
|
|
))}
|
|
</section>
|
|
</div>
|
|
</PublicLayout>
|
|
)
|
|
}
|