diff --git a/app/src/pages/ComparisonPage.jsx b/app/src/pages/ComparisonPage.jsx new file mode 100644 index 0000000..7c53be7 --- /dev/null +++ b/app/src/pages/ComparisonPage.jsx @@ -0,0 +1,202 @@ +import { useState } from 'react'; +import { TeknavData } from '../../teknav-data.js'; +import { useNav, EmptyState } from '../../teknav-ui.jsx'; +import linkIcon from '../../src/assets/icons/link.svg'; + +function ComparisonVoteBar({ slug, item1, item2 }) { + const key = `cmp_vote_${slug}`; + const [vote, setVote] = useState(() => { + try { return localStorage.getItem(key) || null; } catch { return null; } + }); + const [shared, setShared] = useState(false); + + const cast = (choice) => { + try { localStorage.setItem(key, choice); } catch {} + setVote(choice); + }; + + const shareComparison = () => { + const url = `https://www.teknav.ir/compare/${slug}`; + if (navigator.share) { + navigator.share({ title: `مقایسه ${item1.name} در برابر ${item2.name} — تکناو`, url }).catch(() => {}); + } else { + navigator.clipboard?.writeText(url).then(() => { setShared(true); setTimeout(() => setShared(false), 2000); }).catch(() => {}); + } + }; + + return ( +
+
+

شما کدام را ترجیح می‌دهید؟

+
+ + +
+ {vote && ( +

+ انتخاب شما ثبت شد. برای تغییر دوباره کلیک کنید. +

+ )} +
+ +
+ ); +} + +export function ComparisonPage({ slug }) { + const { navigate } = useNav(); + const comparison = (TeknavData.comparisons ?? []).find((c) => c.slug === slug); + + if (!comparison) { + return ( +
+ +
+ ); + } + + const { item1, item2, verdict, useCases = [], relatedArticles = [], relatedGlossary = [] } = comparison; + const articles = TeknavData.articles.filter((a) => relatedArticles.includes(a.slug)); + const glossaryTerms = (TeknavData.glossary ?? []).filter((g) => relatedGlossary.includes(g.slug)); + + const cardStyle = { + background: '#fff', borderRadius: 12, padding: 24, + border: '1px solid #E4DDD2', flex: '1 1 300px', + }; + const proStyle = { fontSize: 13, color: '#2E7D32', marginBottom: 6, display: 'flex', alignItems: 'flex-start', gap: 6 }; + const conStyle = { fontSize: 13, color: '#C62828', marginBottom: 6, display: 'flex', alignItems: 'flex-start', gap: 6 }; + + return ( +
+ + +

+ {comparison.title} +

+ {comparison.metaDescription && ( +

{comparison.metaDescription}

+ )} + {comparison.factCheckedAt && ( +

+ آخرین بروزرسانی: {comparison.factCheckedAt} +

+ )} + + + +
+ {[item1, item2].map((item) => ( +
+

{item.name}

+

{item.summary}

+
مزایا
+ {(item.pros || []).map((p, i) => ( +
✓{p}
+ ))} +
معایب
+ {(item.cons || []).map((c, i) => ( +
✗{c}
+ ))} +
+ ))} +
+ + {useCases.length > 0 && ( +
+

چه زمانی کدام را انتخاب کنیم؟

+ {useCases.map(([left, right], i) => ( +
+
+ {item1.name}: {left} +
+
+ {item2.name}: {right} +
+
+ ))} +
+ )} + + {verdict && ( +
+

جمع‌بندی و نتیجه‌گیری

+

{verdict}

+
+ )} + + {glossaryTerms.length > 0 && ( +
+

اصطلاحات مرتبط

+
+ {glossaryTerms.map((g) => ( +
navigate(`/glossary/${g.slug}`)} + style={{ background: '#fff', border: '1px solid #0F6B73', borderRadius: 8, padding: '10px 16px', cursor: 'pointer' }} + > +
{g.term}
+
{g.english}
+
+ ))} +
+
+ )} + + {articles.length > 0 && ( +
+

مقالات مرتبط

+
+ {articles.map((a) => ( +
navigate(`/article/${a.slug}`)} + style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 8, padding: '14px 18px', cursor: 'pointer', display: 'flex', gap: 12, alignItems: 'flex-start' }} + > +
+
{a.title}
+
{a.summary?.slice(0, 100)}…
+
+ ← +
+ ))} +
+
+ )} +
+ ); +}