Import source: app/src/pages/AuthorProfilePage

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:24:53 +03:30
parent 8dc2708fe2
commit 2d0803128a
1 changed files with 50 additions and 0 deletions
@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react';
+import { TeknavData } from '../../teknav-data.js';
+import { useNav, AuthorAvatar, EmptyState } from '../../teknav-ui.jsx';
+import { ArticleRow } from '../../teknav-articles.jsx';
+
+export function AuthorProfilePage({ slug }) {
+  const { navigate } = useNav();
+  const [author, setAuthor] = useState(null);
+  const [articles, setArticles] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const staticAuthor = TeknavData.authors.find(a => a.slug === slug);
+    const username = staticAuthor?.username || slug;
+    navigate(`/profile/@${username}`);
+  }, [slug]);
+
+  if (loading) return <div style={{ paddingTop: 120, textAlign: 'center', fontFamily: 'Vazirmatn,sans-serif', color: '#5F6B6D' }}>در حال بارگذاری…</div>;
+  if (!author) return <EmptyState title="نویسنده یافت نشد" />;
+
+  return (
+    <div style={{ paddingTop: 80, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Vazirmatn,sans-serif', direction: 'rtl' }}>
+      <div style={{ background: 'linear-gradient(135deg,#20343A,#0F2830)', padding: '48px 24px' }}>
+        <div style={{ maxWidth: 900, margin: '0 auto', display: 'flex', gap: 28, alignItems: 'center', flexWrap: 'wrap' }}>
+          <AuthorAvatar author={author} size={96} />
+          <div>
+            <h1 style={{ fontSize: 28, fontWeight: 900, color: '#FAF7F0', margin: '0 0 6px', display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+              {author.name}
+              {author.verifiedExpert && <span style={{ fontSize: 12, color: '#D49A2A', background: 'rgba(212,154,42,0.12)', border: '1px solid rgba(212,154,42,0.45)', borderRadius: 999, padding: '3px 10px' }}>متخصص تاییدشده</span>}
+            </h1>
+            {author.verifiedExpert && author.verificationNote && <div style={{ color: '#CFE2DD', fontSize: 12, marginBottom: 8 }}>{author.verificationNote}</div>}
+            <div style={{ fontSize: 14, color: '#D49A2A', fontWeight: 600, marginBottom: 10 }}>{author.specialty}</div>
+            <p style={{ fontSize: 14, color: '#90A4AE', lineHeight: 1.8, margin: '0 0 16px', maxWidth: 520 }}>{author.bio}</p>
+            <div style={{ display: 'flex', gap: 24 }}>
+              <div><span style={{ fontSize: 22, fontWeight: 800, color: '#D49A2A' }}>{author.articleCount}</span><span style={{ fontSize: 12, color: '#90A4AE', marginRight: 4 }}>مقاله</span></div>
+              <div><span style={{ fontSize: 22, fontWeight: 800, color: '#D49A2A' }}>{articles.reduce((s, a) => s + (a.views || 0), 0).toLocaleString('fa')}</span><span style={{ fontSize: 12, color: '#90A4AE', marginRight: 4 }}>بازدید</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div style={{ maxWidth: 900, margin: '0 auto', padding: '32px 24px' }}>
+        <h2 style={{ fontSize: 20, fontWeight: 700, color: '#263238', margin: '0 0 24px' }}>مقاله‌های {author.name}</h2>
+        {articles.length === 0 ? <EmptyState title="مقاله‌ای منتشر نشده" /> :
+          articles.map((a, i) => <ArticleRow key={a.id} article={a} idx={i} />)
+        }
+      </div>
+    </div>
+  );
+}