+
setMobileOpen(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.4)' }} />
+
+
+ Teknav
+
+
+ {NAV_ITEMS.map(item => (
+
+ ))}
+
فارسی (Persian)
+
+
+ )}
+
+
+ );
+}
+
+// ── Footer ──────────────────────────────────────────────────────────────────
+function Footer() {
+ const { navigate } = useNav();
+ return (
+
+ );
+}
+
+// ── Newsletter Form ─────────────────────────────────────────────────────────
+function NewsletterForm() {
+ const [email, setEmail] = useState('');
+ const [state, setState] = useState('idle');
+ const toast = useToast();
+
+ const submit = async (e) => {
+ e.preventDefault();
+ if (!email.includes('@') || !email.includes('.')) { toast('Please enter a valid email address', 'error'); return; }
+ try {
+ await api.post('/api/newsletter/subscribe', { email });
+ setState('done');
+ toast('You\'ve subscribed to Teknav!', 'success');
+ } catch {
+ toast('Subscription error — please try again', 'error');
+ }
+ };
+
+ if (state === 'done') return (
+
+
✓
+
You're subscribed!
+
You'll receive Teknav's latest analysis in your inbox.
+
+ );
+
+ return (
+
+ );
+}
+
+// ── Skeleton Loader ─────────────────────────────────────────────────────────
+function SkeletonLoader({ lines = 3, height = 16 }) {
+ return (
+
+ {Array.from({ length: lines }).map((_, i) => (
+
+ ))}
+
+ );
+}
+
+// ── Empty State ─────────────────────────────────────────────────────────────
+function EmptyState({ title = 'No results found', subtitle = 'Try different filters or search terms' }) {
+ return (
+
+
◎
+
{title}
+
{subtitle}
+
+ );
+}
+
+// ── Reading Progress ────────────────────────────────────────────────────────
+function ReadingProgress() {
+ const [pct, setPct] = useState(0);
+ useEffect(() => {
+ const h = () => {
+ const el = document.documentElement;
+ const scroll = el.scrollTop || document.body.scrollTop;
+ const total = el.scrollHeight - el.clientHeight;
+ setPct(total > 0 ? (scroll / total) * 100 : 0);
+ };
+ window.addEventListener('scroll', h);
+ return () => window.removeEventListener('scroll', h);
+ }, []);
+ return (
+
+ );
+}
+
+// ── Author Avatar ───────────────────────────────────────────────────────────
+function AuthorAvatar({ author, size = 40 }) {
+ const a = typeof author === 'string' ? authors.find(x => x.id === author) : author;
+ if (!a) return null;
+ return (
+
{a.initials || a.name.slice(0, 2)}
+ );
+}
+
+// ── Push Notification Prompt ────────────────────────────────────────────────
+function PushPrompt() {
+ const [visible, setVisible] = useState(false);
+ const toast = useToast();
+
+ useEffect(() => {
+ if (
+ 'PushManager' in window &&
+ 'serviceWorker' in navigator &&
+ typeof Notification !== 'undefined' &&
+ Notification.permission === 'default' &&
+ !localStorage.getItem('push_prompt_dismissed_en')
+ ) {
+ const t = setTimeout(() => setVisible(true), 8000);
+ return () => clearTimeout(t);
+ }
+ }, []);
+
+ if (!visible) return null;
+
+ const handleEnable = async () => {
+ try {
+ const perm = await Notification.requestPermission();
+ if (perm === 'granted') toast('Browser notifications enabled');
+ } catch { /* ignore */ }
+ setVisible(false);
+ };
+
+ const dismiss = () => {
+ localStorage.setItem('push_prompt_dismissed_en', '1');
+ setVisible(false);
+ };
+
+ return (
+
+
🔔
+
+
Browser notifications
+
Never miss a Teknav article
+
+
+
+
+
+
+ );
+}
+
+// ── Shared styles ───────────────────────────────────────────────────────────
+const iconBtnStyle = {
+ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+ width: 36, height: 36, borderRadius: 8, transition: 'background 0.15s',
+};
+const pillBtn = {
+ border: 'none', cursor: 'pointer', padding: '8px 18px', borderRadius: 8,
+ fontSize: 13, fontFamily: 'Inter,sans-serif', fontWeight: 600,
+ transition: 'all 0.15s', display: 'inline-flex', alignItems: 'center', gap: 6,
+};
+const inputStyle = {
+ border: '1px solid #E4DDD2', borderRadius: 8, padding: '9px 14px',
+ fontSize: 13, fontFamily: 'Inter,sans-serif', background: '#fff',
+ color: '#263238', outline: 'none', width: '100%',
+};
+
+export {
+ ToastProvider, useToast, NavProvider, useNav, AuthProvider, useAuth,
+ CategoryBadge, TypeBadge, AuthorAvatar,
+ Header, Footer, NewsletterForm, SkeletonLoader, EmptyState, ReadingProgress,
+ PushPrompt,
+ iconBtnStyle, pillBtn, inputStyle,
+};