87 lines
3.3 KiB
JavaScript
87 lines
3.3 KiB
JavaScript
import PublicLayout from '../../components/PublicLayout.jsx'
|
|
import PageHeader from '../../components/PageHeader.jsx'
|
|
import { Loading, ErrorState } from '../../components/PageState.jsx'
|
|
import { useAsync } from '../../lib/useAsync.js'
|
|
import { api } from '../../api/client.js'
|
|
|
|
export default function Status() {
|
|
const { loading, error, data } = useAsync(() => api.status())
|
|
const mode = data?.mode || 'live'
|
|
const statusMessage = data?.status_message || ''
|
|
const isLive = mode === 'live'
|
|
|
|
const stats = [
|
|
{ value: isLive ? 'Live' : 'Maint.', label: 'Site mode' },
|
|
{ value: isLive ? 'Open' : 'Closed', label: 'Public login' },
|
|
{ value: statusMessage || '—', label: 'Latest note' },
|
|
]
|
|
|
|
return (
|
|
<PublicLayout section="website">
|
|
<div className="shell-narrow page-body">
|
|
<PageHeader eyebrow="Live" title="Shard Status" />
|
|
|
|
{loading && <Loading />}
|
|
{error && <ErrorState message="Could not load status right now." />}
|
|
|
|
{!loading && !error && (
|
|
<>
|
|
<section
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 16,
|
|
padding: '24px 26px',
|
|
border: `1px solid ${isLive ? 'rgba(95,185,138,0.45)' : '#5a4a2a'}`,
|
|
borderRadius: 10,
|
|
background: isLive
|
|
? 'linear-gradient(180deg,rgba(22,46,34,0.5),rgba(16,26,20,0.4))'
|
|
: 'linear-gradient(180deg,rgba(58,46,22,0.5),rgba(30,26,16,0.4))',
|
|
marginBottom: 24,
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
flex: 'none',
|
|
width: 12,
|
|
height: 12,
|
|
borderRadius: '50%',
|
|
background: isLive ? 'var(--mode-live)' : 'var(--mode-maint)',
|
|
boxShadow: `0 0 12px ${isLive ? 'rgba(95,185,138,0.7)' : 'rgba(230,194,106,0.7)'}`,
|
|
}}
|
|
/>
|
|
<div>
|
|
<strong
|
|
className="display"
|
|
style={{ display: 'block', fontSize: '1.2rem', color: isLive ? '#bfe6cf' : '#f0e3c4' }}
|
|
>
|
|
{isLive ? 'Live — the gates are open' : 'Maintenance — building in progress'}
|
|
</strong>
|
|
<span style={{ color: isLive ? '#a9cdb8' : '#cdbf9a', fontSize: '0.98rem' }}>
|
|
{statusMessage || (isLive ? 'The shard is online.' : 'The gates are closed while we shape the world. Public login is not open yet.')}
|
|
</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid-3" style={{ gap: 14, marginBottom: 30 }}>
|
|
{stats.map((s) => (
|
|
<div key={s.label} className="panel" style={{ padding: 20, textAlign: 'center' }}>
|
|
<div className="display" style={{ fontSize: '1.6rem', color: 'var(--head)' }}>
|
|
{s.value}
|
|
</div>
|
|
<div
|
|
className="sans"
|
|
style={{ color: 'var(--accent)', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 6 }}
|
|
>
|
|
{s.label}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
</>
|
|
)}
|
|
</div>
|
|
</PublicLayout>
|
|
)
|
|
}
|