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 (
);
}
// ── 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,
};