Import source: app/src/pages/SeriesPage

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:25:37 +03:30
parent 0eab8ed756
commit 16b552887e
1 changed files with 51 additions and 0 deletions
@@ -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>
+  );
+}