Import source: app/src/pages/SeriesPage
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
@@ -0,0 +1,51 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useNav, EmptyState, pillBtn } from '../../teknav-ui.jsx';
|
||||||
|
import { ArticleRow } from '../../teknav-articles.jsx';
|
||||||
|
import { contentApi } from '../../src/lib/content-api.js';
|
||||||
|
|
||||||
|
export function SeriesPage({ slug }) {
|
||||||
|
const { navigate } = useNav();
|
||||||
|
const [series, setSeries] = useState(null);
|
||||||
|
const [error, setError] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
setError(false);
|
||||||
|
contentApi.getSeries(slug)
|
||||||
|
.then((item) => { if (!cancelled) setSeries(item); })
|
||||||
|
.catch(() => { if (!cancelled) setError(true); });
|
||||||
|
return () => { cancelled = true; };
|
||||||
|
}, [slug]);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div style={{ paddingTop: 100, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Vazirmatn,sans-serif', direction: 'rtl' }}>
|
||||||
|
<EmptyState title="سری مقاله پیدا نشد" subtitle="این مجموعه در API وجود ندارد یا هنوز منتشر نشده است." />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!series) {
|
||||||
|
return <div style={{ paddingTop: 120, minHeight: '60vh', textAlign: 'center', fontFamily: 'Vazirmatn,sans-serif', color: '#5F6B6D' }}>در حال بارگذاری...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ paddingTop: 80, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Vazirmatn,sans-serif', direction: 'rtl' }}>
|
||||||
|
<div style={{ maxWidth: 960, margin: '0 auto', padding: '40px 24px' }}>
|
||||||
|
<button onClick={() => navigate('/articles')} style={{ ...pillBtn, background: '#F4EFE6', color: '#0F6B73', border: '1px solid #E4DDD2', marginBottom: 18 }}>بازگشت به مقالهها</button>
|
||||||
|
<h1 style={{ fontSize: 30, fontWeight: 900, color: '#263238', margin: '0 0 10px' }}>{series.title}</h1>
|
||||||
|
{series.description && <p style={{ color: '#5F6B6D', fontSize: 15, lineHeight: 1.9, margin: '0 0 28px' }}>{series.description}</p>}
|
||||||
|
{(series.articles ?? []).length === 0 ? <EmptyState title="هنوز مقالهای در این سری نیست" /> : (
|
||||||
|
<div style={{ display: 'grid', gap: 14 }}>
|
||||||
|
{series.articles.map((item, index) => (
|
||||||
|
<div key={item.article.id} style={{ display: 'grid', gridTemplateColumns: '44px 1fr', gap: 14, alignItems: 'start' }}>
|
||||||
|
<div style={{ width: 36, height: 36, borderRadius: 999, background: '#0F6B73', color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 900 }}>{(item.position ?? index + 1).toLocaleString('fa-IR')}</div>
|
||||||
|
<ArticleRow article={item.article} idx={index} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user