91 lines
3.3 KiB
React
91 lines
3.3 KiB
React
import { useReveal, Icons, getBootstrap } from './atoms.jsx';
|
||
|
||
function NewsCard({ tag, tagType, date, title, excerpt, featured, image_url }) {
|
||
const ref = useReveal();
|
||
return (
|
||
<article className={`news-card reveal ${featured ? 'featured' : ''}`} ref={ref}>
|
||
<div className="news-meta">
|
||
<span className={`news-tag ${tagType || 'patch'}`}>{tag}</span>
|
||
{date && <span>{date}</span>}
|
||
</div>
|
||
{featured && image_url && (
|
||
<div
|
||
className="news-placeholder"
|
||
style={{
|
||
backgroundImage: `url(${image_url})`,
|
||
backgroundSize: 'cover',
|
||
backgroundPosition: 'center',
|
||
color: 'transparent',
|
||
}}
|
||
>
|
||
{title}
|
||
</div>
|
||
)}
|
||
{featured && !image_url && (
|
||
<div className="news-placeholder">[ placeholder ] · 1600×800</div>
|
||
)}
|
||
<h3 className="news-title">{title}</h3>
|
||
<p className="news-excerpt">{excerpt}</p>
|
||
</article>
|
||
);
|
||
}
|
||
|
||
export default function News() {
|
||
const ref = useReveal();
|
||
const posts = getBootstrap().posts || [];
|
||
|
||
return (
|
||
<section id="news" data-screen-label="04 News">
|
||
<div className="wrap">
|
||
<div className="section-head reveal" ref={ref}>
|
||
<span className="eyebrow">Хроники сервера</span>
|
||
<div style={{ height: 20 }} />
|
||
<h2 className="h-display" style={{ fontSize: 'clamp(36px, 5vw, 60px)' }}>
|
||
Новости и патчноуты
|
||
</h2>
|
||
<div className="divider-ornament">✦</div>
|
||
</div>
|
||
|
||
{posts.length === 0 ? (
|
||
<NewsEmpty />
|
||
) : (
|
||
<div className="news-grid">
|
||
{posts.map((p) => (
|
||
<NewsCard key={p.id ?? p.title} {...p} />
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function NewsEmpty() {
|
||
const ref = useReveal();
|
||
return (
|
||
<div
|
||
className="news-empty reveal"
|
||
ref={ref}
|
||
style={{
|
||
textAlign: 'center',
|
||
padding: '80px 24px',
|
||
border: '1px dashed var(--panel-border-strong)',
|
||
borderRadius: 'var(--radius)',
|
||
background: 'rgba(127, 184, 212, 0.02)',
|
||
}}
|
||
>
|
||
<div style={{ fontSize: 28, color: 'var(--moon)', marginBottom: 14 }}>✦</div>
|
||
<h3
|
||
className="h-display"
|
||
style={{ fontSize: 24, marginBottom: 10 }}
|
||
>
|
||
Пока новостей нет
|
||
</h3>
|
||
<p className="lead" style={{ fontStyle: 'italic', maxWidth: 520, margin: '0 auto' }}>
|
||
Хроники сервера ещё не открыли первую страницу. Загляни позже — здесь
|
||
появятся патчноуты, события и девблоги.
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|