4702614896
Мобилка: - Header: hide-on-scroll, мобильный burger-menu, тонкая адаптация - Hero: текст и кнопки оптимизированы под узкие экраны (full-width buttons) - ArticleCard featured: на мобилке в столбик, картинка сверху - Stats: компактная сетка 2x2 с уменьшенным шрифтом - Глобально: scroll-behavior smooth, safe-area-inset, tap targets 40px+ - prefers-reduced-motion respected Страница статьи: - ReadingProgress: прогресс-бар сверху при скролле - ScrollToTop: круглая кнопка наверху после 800px скролла - ShareButton: Web Share API на мобилках, копирование URL на десктопе - Related articles: подбираем по пересечению тегов (max 3) - Мобильная типографика: prose-base sm:prose-lg, leading-relaxed SEO/инфра: - /api/search: простой поиск по title/excerpt/tags с подсветкой и скорингом - SearchBox: оверлей с / хоткеем, дебаунс 250ms, мобиле-friendly - /rss.xml: полноценный RSS-фид - sitemap.xml: динамический через next sitemap() - robots.txt: динамический - viewport metadata + theme-color для светлой/тёмной темы - alternates rel=alternate type=application/rss+xml
39 lines
1.0 KiB
JavaScript
39 lines
1.0 KiB
JavaScript
'use client';
|
|
import { useState } from 'react';
|
|
import { Share2, Check, Link as LinkIcon } from 'lucide-react';
|
|
|
|
export default function ShareButton({ title, url }) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
async function share() {
|
|
const fullUrl = url || (typeof window !== 'undefined' ? window.location.href : '');
|
|
if (typeof navigator !== 'undefined' && navigator.share) {
|
|
try {
|
|
await navigator.share({ title, url: fullUrl });
|
|
} catch {
|
|
// отмена пользователем — игнор
|
|
}
|
|
} else {
|
|
try {
|
|
await navigator.clipboard.writeText(fullUrl);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 1800);
|
|
} catch {}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={share}
|
|
className="btn btn-ghost text-sm py-1.5"
|
|
aria-label="Поделиться"
|
|
>
|
|
{copied ? (
|
|
<><Check className="w-4 h-4" /> Скопировано</>
|
|
) : (
|
|
<><Share2 className="w-4 h-4" /> Поделиться</>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|