core-maugli 1.0.2

package/src/components/Nav.astro

@@ -0,0 +1,151 @@
+---
+import NavLink from './NavLink.astro';
+
+import ThemeToggle from './ThemeToggle.astro';
+import LanguageSwitcher from './LanguageSwitcher.astro';
+import { maugliConfig } from '../config/maugli.config';
+import { LANGUAGES } from '../i18n/languages';
+
+const lang = typeof maugliConfig.defaultLang === 'string' ? maugliConfig.defaultLang : 'en';
+const languageObj = LANGUAGES.find((l) => l.code === lang) || LANGUAGES.find((l) => l.code === 'en');
+const dict = languageObj?.dict && Object.keys(languageObj.dict).length > 0 ? languageObj.dict : LANGUAGES.find((l) => l.code === 'en')?.dict || {};
+
+const navLinks = (maugliConfig.navLinks || []).map((link) => {
+    const d = dict as any;
+    return {
+        ...link,
+        label: d?.nav?.[link.key] || link.label
+    };
+});
+---
+
+<nav class="fixed top-0 left-0 w-full z-50 bg-[var(--bg-main)] opacity-95 backdrop-blur-lg flex items-center justify-between pt-4 pb-4">
+    <div class="flex items-center gap-8 w-full">
+        <a href={maugliConfig.brand.logoHref && maugliConfig.brand.logoHref.trim() ? maugliConfig.brand.logoHref : '/'} class="ml-6 flex-shrink-0 card-blur">
+            <picture>
+                <source srcset={maugliConfig.brand.logoDark} media="(prefers-color-scheme: dark)" />
+                <img src={maugliConfig.brand.logoLight} alt="Логотип" width="48" height="48" class="w-12 h-12" />
+            </picture>
+        </a>
+        <ul
+            id="menu-items"
+            class="menu flex gap-8 items-center mt-16 md:mt-0 justify-center w-full md:static md:flex-row md:gap-8 md:items-center md:justify-center max-md:flex-col max-md:gap-1 max-md:absolute max-md:top-0 max-md:right-0 max-md:left-0 max-md:w-screen max-md:pt-4 max-md:pb-10 max-md:z-20 max-md:rounded-none max-md:border-0 max-md:items-start max-md:bg-[var(--bg-main)] max-md:border-b max-md:border-b-[var(--border-main)] max-md:mx-0 max-md:p-0"
+        >
+            {
+                navLinks.map((link) => (
+                    <li class="py-1 w-full text-left md:w-auto md:text-center max-md:pl-4">
+                        <NavLink class="text-xl font-sans text-heading md:text-base" href={link.href}>
+                            {link.label}
+                        </NavLink>
+                    </li>
+                ))
+            }
+        </ul>
+    </div>
+    <div class="flex items-center gap-2 md:gap-4 ml-auto mr-6">
+        <LanguageSwitcher class="order-1" />
+        {maugliConfig.enableThemeSwitcher !== false && <ThemeToggle class="order-2" />}
+        <button
+            class="menu-toggle cursor-pointer w-8 h-8 flex items-center justify-center relative z-30 md:hidden ml-auto text-[var(--text-heading)] order-3"
+            aria-expanded="false"
+            aria-controls="menu-items"
+        >
+            <span class="menu-toggle-icon w-6 h-px relative bg-current"></span>
+        </button>
+    </div>
+</nav>
+
+<style>
+    .text-heading {
+        color: var(--text-heading);
+    }
+    .nav-active {
+        color: var(--brand-color) !important;
+        font-weight: bold;
+        text-decoration: none !important;
+    }
+    @reference "tailwindcss";
+
+    @media (max-width: 767px) {
+        .menu {
+            @apply invisible opacity-0;
+            width: calc(100% + 1.25rem);
+        }
+        .menu.is-visible {
+            @apply visible opacity-100;
+            transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
+        }
+        .menu-toggle-icon {
+            transition: width 0.1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+        }
+        .menu-toggle.is-active .menu-toggle-icon {
+            @apply w-0;
+            transition: width 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .menu-toggle-icon:before,
+        .menu-toggle-icon:after {
+            @apply w-6 h-px absolute left-1/2 top-0 origin-center -translate-x-1/2 bg-current;
+            content: '';
+            transition:
+                rotate 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+                margin 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
+        }
+        .menu-toggle-icon:before {
+            @apply -mt-1.5;
+        }
+        .menu-toggle-icon:after {
+            @apply mt-1.5;
+        }
+        .menu-toggle.is-active .menu-toggle-icon:before,
+        .menu-toggle.is-active .menu-toggle-icon:after {
+            @apply mt-0;
+            transition:
+                margin 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
+                rotate 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+        }
+        .menu-toggle.is-active .menu-toggle-icon:before {
+            @apply rotate-45;
+        }
+        .menu-toggle.is-active .menu-toggle-icon:after {
+            @apply -rotate-45;
+        }
+    }
+</style>
+
+<script>
+    function menuToggle() {
+        const menu = document.querySelector('.menu');
+        const menuToggleBtn = document.querySelector('.menu-toggle');
+        if (!menu || !menuToggleBtn) return;
+        menuToggleBtn.addEventListener('click', () => {
+            const isMenuExpanded = menuToggleBtn.getAttribute('aria-expanded') === 'true';
+            menuToggleBtn.classList.toggle('is-active');
+            menuToggleBtn.setAttribute('aria-expanded', isMenuExpanded ? 'false' : 'true');
+            menu.classList.toggle('is-visible');
+        });
+        // Закрытие при клике вне меню
+        document.addEventListener('click', (e) => {
+            if (!menuToggleBtn.contains(e.target as Node) && !menu.contains(e.target as Node)) {
+                menuToggleBtn.classList.remove('is-active');
+                menuToggleBtn.setAttribute('aria-expanded', 'false');
+                menu.classList.remove('is-visible');
+            }
+        });
+        // Закрытие при прокрутке
+        window.addEventListener('scroll', () => {
+            menuToggleBtn.classList.remove('is-active');
+            menuToggleBtn.setAttribute('aria-expanded', 'false');
+            menu.classList.remove('is-visible');
+        });
+        // Закрытие при выборе пункта меню
+        menu.querySelectorAll('li').forEach((item) => {
+            item.addEventListener('click', () => {
+                menuToggleBtn.classList.remove('is-active');
+                menuToggleBtn.setAttribute('aria-expanded', 'false');
+                menu.classList.remove('is-visible');
+            });
+        });
+    }
+    menuToggle();
+    document.addEventListener('astro:after-swap', menuToggle);
+</script>

package/src/components/NavLink.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'a'>;
+
+const { href, class: className, ...props } = Astro.props;
+const { pathname } = Astro.url;
+const isActive = href === pathname || href === pathname.replace(/\/$/, '');
+---
+
+<a
+    class:list={[
+        className,
+        isActive
+            ? 'text-[1.25rem] text-brand-color transition-colors duration-200 font-sans font-normal nav-link nav-active uppercase'
+            : 'text-[1.25rem] text-heading transition-colors duration-200 font-sans font-normal nav-link uppercase'
+    ]}
+    href={href}
+    {...props}
+>
+    <slot />
+</a>
+
+<style>
+    .nav-link:hover,
+    .nav-link.nav-active {
+        color: var(--brand-color);
+        font-weight: normal;
+        text-transform: uppercase;
+    }
+</style>

package/src/components/Pagination.astro

@@ -0,0 +1,70 @@
+---
+import { maugliConfig } from '../config/maugli.config';
+import { LANGUAGES } from '../i18n/languages';
+import ArrowLeft from '../icons/ArrowLeft.astro';
+import ArrowRight from '../icons/ArrowRight.astro';
+// Универсальный импорт словарей по доступным языкам
+const dicts: Record<string, any> = {};
+for (const lang of LANGUAGES) {
+    try {
+        dicts[lang.code] = await import(`../i18n/${lang.code}.json`).then((m) => m.default);
+    } catch {}
+}
+const { page, class: className } = Astro.props;
+const lang = maugliConfig.defaultLang || 'en';
+const dict = dicts[lang] || dicts['en'] || {};
+
+function getGoToPageLabel(targetPage, lastPage) {
+    return dict.pagination.goToPage.replace('{page}', targetPage).replace('{lastPage}', lastPage);
+}
+function getPageOfLabel(currentPage, lastPage) {
+    return dict.pagination.pageOf.replace('{currentPage}', currentPage).replace('{lastPage}', lastPage);
+}
+---
+
+<nav aria-label="Pagination" class:list={['flex items-center justify-center gap-4', className]}>
+    {
+        page.url.prev && (
+            <a href={page.url.prev} aria-label={getGoToPageLabel(page.currentPage - 1, page.lastPage)} class="pagination-btn">
+                <ArrowLeft class="w-5 h-5 fill-current" />
+            </a>
+        )
+    }
+    <span class="pagination-text" aria-current="page">{getPageOfLabel(page.currentPage, page.lastPage)}</span>
+    {
+        page.url.next && (
+            <a href={page.url.next} aria-label={getGoToPageLabel(page.currentPage + 1, page.lastPage)} class="pagination-btn">
+                <ArrowRight class="w-5 h-5 fill-current" />
+            </a>
+        )
+    }
+</nav>
+
+<style>
+    .pagination-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 8px;
+        color: var(--text-muted);
+        background: transparent;
+        border: none;
+        border-radius: 12px;
+        transition: all 0.2s ease;
+        cursor: pointer;
+        text-decoration: none;
+    }
+
+    .pagination-btn:hover {
+        background: var(--bg-muted);
+        color: var(--text-main);
+        transform: scale(1.05);
+    }
+
+    .pagination-text {
+        font-size: 14px;
+        color: var(--text-muted);
+        padding: 0 16px;
+        font-weight: 500;
+    }
+</style>

package/src/components/PostPreview.astro

@@ -0,0 +1,22 @@
+---
+import { type CollectionEntry } from 'astro:content';
+import Card from './Card.astro';
+
+type Props = { post: CollectionEntry<'blog'>; class?: string; headingLevel?: 'h2' | 'h3' };
+
+const { post, class: className, headingLevel = 'h2' } = Astro.props;
+const { title, publishDate, excerpt, image, seo, isFeatured } = post.data;
+---
+
+<Card
+    href={`/blog/${post.id}/`}
+    title={title}
+    image={image}
+    seo={seo}
+    publishDate={publishDate}
+    excerpt={excerpt}
+    headingLevel={headingLevel}
+    isFeatured={isFeatured}
+    class={className}
+    type="blog"
+/>

package/src/components/ProductBannerCard.astro

@@ -0,0 +1,47 @@
+---
+import { maugliConfig } from '../config/maugli.config';
+
+import { LANGUAGES } from '../i18n/languages';
+
+// Карточка баннера продукта для боковой панели статьи/проекта
+// props: product (CollectionEntry<'products'>)
+const { product } = Astro.props;
+const { seo, image, title, id, productLink } = product?.data || {};
+
+// Дефолтная картинка всегда
+const productID = product?.data?.productID;
+let bannerImage = productID ? `/${productID}.webp` : maugliConfig.defaultProductImage;
+if (!bannerImage) bannerImage = maugliConfig.defaultProductImage;
+// Кнопка: если есть productLink, то ссылка, иначе неактивная
+const buttonHref = productLink && productLink.trim() ? productLink : null;
+const isExternal = buttonHref && /^https?:\/\//.test(buttonHref);
+
+const lang = typeof maugliConfig.defaultLang === 'string' ? maugliConfig.defaultLang : 'en';
+const languageObj = LANGUAGES.find((l) => l.code === lang) || LANGUAGES.find((l) => l.code === 'en');
+const fallbackDict = LANGUAGES.find((l) => l.code === 'en')?.dict || {};
+const dict = languageObj?.dict && Object.keys(languageObj.dict).length > 0 ? languageObj.dict : fallbackDict;
+const buttons = (dict as any).buttons || (fallbackDict as any).buttons || {};
+---
+
+<div class="product-banner-card relative aspect-[1200/630] overflow-hidden bg-[var(--card-bg)] rounded-custom flex flex-col justify-end">
+    <img src={bannerImage} alt={seo?.image?.alt || image?.alt || title || 'Product'} class="absolute inset-0 w-full h-full object-cover rounded-custom z-0" />
+    {
+        buttonHref ? (
+            <a
+                href={buttonHref}
+                target={isExternal ? '_blank' : undefined}
+                rel={isExternal ? 'noopener noreferrer' : undefined}
+                class="flex justify-center items-center min-w-[130px] h-12 font-extrabold text-[16px] px-4 py-3 mx-4 mb-4 transition-colors duration-200 rounded-custom bg-[var(--color-brand)] text-[var(--bg-main)] no-underline z-10"
+            >
+                {buttons.moreAboutProduct}
+            </a>
+        ) : (
+            <button
+                disabled
+                class="flex justify-center items-center min-w-[130px] h-12 font-extrabold text-[16px] px-1 py-3 mx-4 mb-4 transition-colors duration-200 cursor-not-allowed rounded-custom bg-[var(--bg-muted)] text-[var(--text-main)] no-underline z-10"
+            >
+                {buttons.moreAboutProduct}
+            </button>
+        )
+    }
+</div>

package/src/components/ProductPreview.astro

@@ -0,0 +1,21 @@
+---
+import { type CollectionEntry } from 'astro:content';
+import Card from './Card.astro';
+
+type Props = { product: CollectionEntry<'products'>; class?: string; headingLevel?: 'h2' | 'h3' };
+
+const { product, class: className, headingLevel = 'h2' } = Astro.props;
+const { title, description, image, seo, isFeatured } = product.data;
+---
+
+<Card
+    href={`/products/${product.id}/`}
+    title={title}
+    image={image}
+    seo={seo}
+    description={description}
+    headingLevel={headingLevel}
+    isFeatured={isFeatured}
+    class={className}
+    type="product"
+/>

package/src/components/ProjectPreview.astro

@@ -0,0 +1,21 @@
+---
+import { type CollectionEntry } from 'astro:content';
+import Card from './Card.astro';
+
+type Props = { project: CollectionEntry<'projects'>; class?: string; headingLevel?: 'h2' | 'h3' };
+
+const { project, class: className, headingLevel = 'h2' } = Astro.props;
+const { title, description, image, seo, isFeatured } = project.data;
+---
+
+<Card
+    href={`/projects/${project.id}/`}
+    title={title}
+    image={image}
+    seo={seo}
+    description={description}
+    headingLevel={headingLevel}
+    isFeatured={isFeatured}
+    class={className}
+    type="project"
+/>

package/src/components/RubricCard.astro

@@ -0,0 +1,142 @@
+---
+import { getFilteredCollection } from '../utils/content-loader';
+import { maugliConfig } from '../config/maugli.config';
+import { slugify } from '../utils/common-utils';
+import { getPostsByTag } from '../utils/data-utils';
+import CountBadge from './CountBadge.astro';
+
+export interface Props {
+    rubric: {
+        title: string;
+        description?: string;
+        image?: { src: string; alt?: string };
+        quote?: string;
+        isFeatured?: boolean;
+        lang?: string;
+    };
+    class?: string;
+}
+
+const { rubric, class: className = '' } = Astro.props;
+const { title, description, image, quote, isFeatured, lang } = rubric;
+const defaultImage = maugliConfig.defaultRubricImage;
+
+// Универсальный механизм локализации
+import de from '../i18n/de.json';
+import en from '../i18n/en.json';
+import es from '../i18n/es.json';
+import ru from '../i18n/ru.json';
+const dicts: Record<string, any> = { ru, en, es, de };
+// Если появятся новые языки — просто добавить импорт и в объект выше
+const langKey =
+    typeof lang === 'string' && dicts[lang]
+        ? lang
+        : typeof maugliConfig.defaultLang === 'string' && dicts[maugliConfig.defaultLang]
+          ? maugliConfig.defaultLang
+          : 'en';
+const dict = dicts[langKey] || dicts['en'];
+const localeMap: Record<string, string> = { ru: 'ru-RU', en: 'en-US', es: 'es-ES', de: 'de-DE' };
+const locale = localeMap[langKey] || 'en-US';
+
+// Получаем slug рубрики из title через slugify
+const slug = slugify(title);
+
+// Получаем коллекцию постов и считаем количество по тегу (slug)
+let postCount = 0;
+let lastPublishDate = '';
+try {
+    const posts = await getFilteredCollection('blog');
+    const rubricPosts = getPostsByTag(posts, slug);
+    postCount = rubricPosts.length;
+    if (postCount > 0) {
+        // Находим максимальный publishDate
+        lastPublishDate =
+            rubricPosts
+                .map((post) => post.data.publishDate)
+                .filter(Boolean)
+                .map((d) => new Date(d))
+                .sort((a, b) => b.getTime() - a.getTime())[0]
+                ?.toISOString() || '';
+    }
+} catch (e) {
+    postCount = 0;
+    lastPublishDate = '';
+}
+
+function formatDate(dateStr?: string) {
+    if (!dateStr) return '';
+    const date = new Date(dateStr);
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const yesterday = new Date(now);
+    yesterday.setDate(now.getDate() - 1);
+    const isYesterday = date.toDateString() === yesterday.toDateString();
+    if (isToday) return dict.date.today;
+    if (isYesterday) return dict.date.yesterday;
+    const optionsCurrentYear = { day: '2-digit', month: 'long' };
+    const optionsOtherYear = { day: '2-digit', month: 'long', year: 'numeric' };
+    if (date.getFullYear() === now.getFullYear()) {
+        return date.toLocaleDateString(locale, { ...optionsCurrentYear } as any);
+    }
+    return date.toLocaleDateString(locale, { ...optionsOtherYear } as any);
+}
+
+const formattedDate = formatDate(lastPublishDate);
+const dateObj = lastPublishDate ? new Date(lastPublishDate) : null;
+const now = new Date();
+const isToday = dateObj && dateObj.toDateString() === now.toDateString();
+const yesterday = new Date(now);
+yesterday.setDate(now.getDate() - 1);
+const isYesterday = dateObj && dateObj.toDateString() === yesterday.toDateString();
+const isBrandDate = isToday || isYesterday;
+---
+
+<a href={`/tags/${slug}/`} class="block w-full">
+    <article
+        class={`w-full h-[195px] border border-[var(--border-main)] rounded-custom card-bg hover:card-shadow hover:-translate-y-1 transition-all duration-300 p-6 flex flex-row gap-4 items-start ${className}`}
+    >
+        <!-- Левая часть: картинка и дата -->
+        <div class="flex flex-col items-end gap-2 w-[105px] h-[147px]">
+            <img
+                src={image?.src ? image.src : maugliConfig.defaultRubricImage}
+                alt={image?.alt || title}
+                class="w-[105px] h-[107px] object-cover rounded-custom"
+                loading="lazy"
+            />
+            <div class="flex flex-col items-end gap-1 w-[74px] h-[32px]">
+                <span class={`flex items-center gap-1 text-[12px] text-right ${isBrandDate ? 'text-[var(--brand-color)]' : 'text-[var(--text-muted)]'}`}>
+                    <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        style="display:inline-block;vertical-align:middle;opacity:0.6; color: var(--text-muted);"
+                    >
+                        <path
+                            d="M17.7909 6.12232C14.9505 3.32362 10.5815 3.00989 7.39551 5.15377L7.38659 3.92302C7.38509 3.71587 7.21589 3.54914 7.00866 3.55079L6.25874 3.55664C6.05166 3.55822 5.88516 3.72734 5.88666 3.93434L5.90736 6.74122C5.91029 7.15357 6.24576 7.48537 6.65736 7.48537C6.65886 7.48537 6.66104 7.48537 6.66321 7.48537L9.47046 7.46467C9.67761 7.46317 9.84426 7.29389 9.84269 7.08674L9.83684 6.33667C9.83526 6.12959 9.66614 5.96309 9.45914 5.96459L8.98199 5.96804C11.4928 4.71464 14.6299 5.11372 16.7377 7.19017C18.7606 9.18427 19.3134 12.182 18.1639 14.7525C18.082 14.9355 18.1491 15.1487 18.3276 15.24L18.997 15.582C19.1866 15.6789 19.4265 15.6008 19.5145 15.4069C20.9445 12.2567 20.2743 8.57039 17.7909 6.12232ZM17.3434 16.5132C17.3419 16.5132 17.3397 16.5132 17.3375 16.5132L14.5303 16.5338C14.3231 16.5354 14.1565 16.7046 14.158 16.9117L14.1639 17.6618C14.1655 17.8688 14.3346 18.0353 14.5416 18.0339L15.0183 18.0304C12.5073 19.2835 9.37079 18.8841 7.26299 16.8083C5.24009 14.8142 4.68734 11.8164 5.83686 9.24599C5.91869 9.06299 5.85164 8.84977 5.67314 8.75849L5.00376 8.41649C4.81409 8.31959 4.57424 8.39767 4.48619 8.59154C3.05609 11.7417 3.72636 15.428 6.20969 17.8762C7.81439 19.4575 9.90771 20.2456 11.9995 20.2456C13.6101 20.2456 15.2191 19.7767 16.605 18.8438L16.6139 20.0754C16.6154 20.2825 16.7846 20.4493 16.9918 20.4477L17.7418 20.4418C17.9488 20.4402 18.1153 20.2711 18.1138 20.0641L18.0931 17.2573C18.0904 16.8449 17.755 16.5132 17.3434 16.5132Z"
+                            fill="currentColor"></path>
+                    </svg>
+                    {formattedDate}
+                </span>
+            </div>
+        </div>
+        <!-- Правая часть: контент -->
+        <div class="flex flex-col justify-start items-start h-[147px] flex-1 min-w-0">
+            <div class="flex flex-row items-start gap-2 w-full">
+                <h3 class="font-serif font-[700] text-[22px] text-[var(--text-heading)] leading-[1] truncate">{title}</h3>
+                <CountBadge count={postCount} />
+            </div>
+            <div class="mt-2 text-[14px] text-[var(--text-main)] leading-[1.3] line-clamp-6 opacity-80">
+                {description}
+            </div>
+        </div>
+    </article>
+</a>
+
+<style>
+    article:hover {
+        box-shadow: var(--card-shadow);
+    }
+    /* Карточка всегда двухколоночная, контент сверху, текст description не прижат к низу */
+</style>

package/src/components/ShareIcon.astro

@@ -0,0 +1,93 @@
+---
+import { maugliConfig } from '../config/maugli.config';
+import { LANGUAGES } from '../i18n/languages';
+const dicts: Record<string, any> = {};
+for (const lang of LANGUAGES) {
+    try {
+        dicts[lang.code] = await import(`../i18n/${lang.code}.json`).then((m) => m.default);
+    } catch {}
+}
+export interface Props {
+    platform: 'twitter' | 'copy' | 'telegram' | 'linkedin' | 'whatsapp' | 'facebook' | 'copied';
+}
+
+const { platform } = Astro.props;
+
+const currentLang = maugliConfig.defaultLang || 'en';
+const dict = dicts[currentLang] || dicts['en'] || {};
+const ariaLabels = dict.shareIconAriaLabel || {};
+const ariaLabel = ariaLabels[platform] || '';
+
+const getIcon = (platform: string) => {
+    const icons = {
+        twitter: `<svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.0207 8.96875L18.7675 19.0295H17.0129L9.26554 8.96875H11.0207Z" fill="currentColor" fill-opacity="0.8"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM7.61466 8.16667L12.5701 14.6021L7.58333 19.8333H8.70614L13.0709 15.2521L16.5982 19.8333H20.4167L15.1838 13.0367L19.8236 8.16667H18.7031L14.683 12.385L11.4354 8.16667H7.61466Z" fill="currentColor" fill-opacity="0.8"/>
+        </svg>`,
+
+        copy: `<svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM11.3112 12.8618C11.1393 12.8618 10.9742 12.93 10.8526 13.0515L8.34611 15.5649C7.84129 16.1144 7.56815 16.8377 7.5839 17.5837C7.5997 18.3299 7.90325 19.0413 8.43099 19.569C8.95873 20.0968 9.67009 20.4003 10.4163 20.4161C11.1623 20.4319 11.8856 20.1587 12.4351 19.6539L14.9485 17.1474C15.07 17.0258 15.1382 16.8607 15.1382 16.6888C15.1382 16.5169 15.07 16.3518 14.9485 16.2302C14.8268 16.1086 14.6614 16.04 14.4893 16.04C14.3174 16.04 14.1523 16.1086 14.0308 16.2302L11.5243 18.7367C11.2208 19.0295 10.8157 19.193 10.394 19.193C9.9723 19.193 9.56673 19.0296 9.26326 18.7367C9.11447 18.5885 8.99635 18.4123 8.91577 18.2183C8.83519 18.0243 8.79386 17.816 8.79386 17.606C8.79387 17.396 8.83526 17.1881 8.91577 16.9941C8.99631 16.8002 9.11454 16.6239 9.26326 16.4757L11.7698 13.9692C11.8914 13.8476 11.96 13.6826 11.96 13.5107C11.96 13.3386 11.8914 13.1732 11.7698 13.0515C11.6482 12.93 11.4831 12.8618 11.3112 12.8618ZM15.5489 11.8022C15.3769 11.8023 15.212 11.8709 15.0903 11.9925L11.9122 15.1707C11.8517 15.2307 11.8037 15.3022 11.7709 15.3809C11.7381 15.4596 11.7208 15.544 11.7208 15.6292C11.7208 15.7145 11.7381 15.7989 11.7709 15.8776C11.8037 15.9563 11.8516 16.0278 11.9122 16.0878C11.9726 16.1477 12.0443 16.1952 12.123 16.2274C12.2016 16.2595 12.2858 16.2757 12.3708 16.2752C12.4557 16.2757 12.5399 16.2595 12.6186 16.2274C12.6973 16.1952 12.769 16.1477 12.8293 16.0878L16.0075 12.9097C16.1291 12.788 16.1977 12.6231 16.1978 12.4511C16.1978 12.2791 16.1291 12.1142 16.0075 11.9925C15.8858 11.8709 15.7209 11.8022 15.5489 11.8022ZM17.5291 7.58333C16.763 7.58333 16.0279 7.88645 15.4845 8.42643L12.9718 10.9329C12.9116 10.9931 12.8636 11.0645 12.8311 11.1431C12.7985 11.2218 12.7815 11.3064 12.7815 11.3915C12.7815 11.4767 12.7985 11.5612 12.8311 11.6399C12.8636 11.7185 12.9116 11.7899 12.9718 11.8501C13.032 11.9103 13.1033 11.9582 13.182 11.9908C13.2607 12.0234 13.3452 12.0404 13.4303 12.0404C13.5154 12.0403 13.5996 12.0233 13.6781 11.9908C13.7568 11.9582 13.8287 11.9103 13.8889 11.8501L16.3954 9.34359C16.6988 9.05085 17.104 8.88731 17.5256 8.88729C17.9474 8.88729 18.353 9.05071 18.6564 9.34359C18.8052 9.4918 18.9233 9.66803 19.0039 9.86198C19.0845 10.056 19.1258 10.2643 19.1258 10.4744C19.1258 10.6843 19.0844 10.8923 19.0039 11.0862C18.9234 11.2801 18.8052 11.4564 18.6564 11.6046L16.1499 14.1111C16.0894 14.1711 16.0414 14.2427 16.0086 14.3213C15.9759 14.3999 15.9585 14.4844 15.9585 14.5697C15.9585 14.6549 15.9759 14.7393 16.0086 14.818C16.0414 14.8967 16.0894 14.9682 16.1499 15.0282C16.21 15.0888 16.2814 15.1373 16.3601 15.1701C16.4388 15.2028 16.5233 15.2196 16.6085 15.2196C16.6937 15.2196 16.7782 15.2029 16.8569 15.1701C16.9356 15.1373 17.007 15.0888 17.0671 15.0282L19.5736 12.5155C20.1135 11.9721 20.4167 11.237 20.4167 10.4709C20.4166 9.70486 20.1136 8.96983 19.5736 8.42643C19.0302 7.88641 18.2951 7.58336 17.5291 7.58333Z" fill="currentColor" fill-opacity="0.8"/>
+        </svg>`,
+
+        telegram: `<svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM19.209 8.16667C18.7423 8.17491 18.0258 8.4236 14.5799 9.85685C13.373 10.3589 10.9608 11.3981 7.34351 12.974C6.75617 13.2076 6.44818 13.4365 6.42008 13.6599C6.36633 14.0889 6.98397 14.2225 7.76107 14.4751C8.39458 14.681 9.24686 14.9218 9.68994 14.9314C10.0918 14.94 10.5409 14.7747 11.0361 14.4347C14.4155 12.1535 16.1602 11.0002 16.2701 10.9751C16.3473 10.9576 16.4545 10.9352 16.527 10.9996C16.5993 11.0639 16.5922 11.1858 16.5846 11.2189C16.5231 11.4808 13.3495 14.3679 13.1654 14.5588C12.4672 15.284 11.6731 15.7276 12.8983 16.535C13.9584 17.2336 14.5753 17.6796 15.6674 18.3955C16.3653 18.853 16.9127 19.3955 17.6333 19.3292C17.9648 19.2986 18.3076 18.9868 18.4815 18.0571C18.8926 15.8594 19.7007 11.0972 19.8875 9.13509C19.9037 8.96324 19.8829 8.7434 19.8664 8.64689C19.8498 8.55033 19.8153 8.41263 19.6898 8.31079C19.5412 8.19027 19.3117 8.16489 19.209 8.16667Z" fill="currentColor" fill-opacity="0.8"/>
+        </svg>`,
+
+        linkedin: `<svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.4889 12.0575C17.6633 12.0575 18.9321 12.7547 18.9321 14.7964L18.931 18.9321H16.8272V15.2795C16.8272 14.2022 16.369 13.8695 15.7779 13.8695C15.1538 13.8697 14.5417 14.3406 14.5417 15.3068V18.9321H12.4368V12.2449H14.4609V13.1717H14.4882C14.6914 12.7605 15.4029 12.0575 16.4889 12.0575Z" fill="currentColor" fill-opacity="0.8"/>
+            <path d="M11.1728 18.9264H9.06787V12.2403H11.1728V18.9264Z" fill="currentColor" fill-opacity="0.8"/>
+            <path d="M9.89274 8.91919C10.127 8.87322 10.3702 8.89802 10.5906 8.98983C10.8109 9.08163 10.9989 9.23671 11.1312 9.4353C11.2636 9.63401 11.3342 9.8676 11.334 10.1064C11.3362 10.2662 11.3066 10.4249 11.2463 10.5729C11.1859 10.7209 11.0959 10.855 10.9825 10.9677C10.8691 11.0803 10.7344 11.1692 10.586 11.2286C10.4376 11.288 10.2787 11.3168 10.1189 11.3135C9.88021 11.3121 9.64736 11.2403 9.44954 11.1067C9.25169 10.973 9.09731 10.7837 9.00692 10.5627C8.9166 10.3417 8.89395 10.0987 8.94141 9.86483C8.9889 9.6309 9.10476 9.41613 9.27409 9.24788C9.44338 9.07974 9.6586 8.96517 9.89274 8.91919Z" fill="currentColor" fill-opacity="0.8"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM8.03337 7C7.75931 7.00003 7.49628 7.1087 7.30249 7.30249C7.1087 7.49628 7.00003 7.75931 7 8.03337V19.9666C7.00003 20.2407 7.1087 20.5037 7.30249 20.6975C7.49628 20.8913 7.75931 21 8.03337 21H19.9666C20.2407 21 20.5037 20.8913 20.6975 20.6975C20.8913 20.5037 21 20.2407 21 19.9666V8.03337C21 7.75931 20.8913 7.49628 20.6975 7.30249C20.5037 7.1087 20.2407 7.00003 19.9666 7H8.03337Z" fill="currentColor" fill-opacity="0.8"/>
+        </svg>`,
+
+        whatsapp: `<svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.0302 8.17464C15.5779 8.17467 17.0352 8.7736 18.1283 9.86483C19.2214 10.9561 19.8231 12.4032 19.8231 13.9436C19.823 17.1241 17.2225 19.7091 14.0302 19.7091H14.0268C12.9871 19.7058 11.9674 19.4299 11.0782 18.9042L10.8674 18.7778L8.6748 19.3497L9.25985 17.2237L9.12256 17.0044C8.5409 16.0861 8.23673 15.0247 8.23673 13.9368C8.23675 10.7562 10.8377 8.17131 14.0302 8.17464ZM11.563 10.733C11.446 10.733 11.2586 10.7759 11.0981 10.9489C10.9377 11.1219 10.4897 11.5414 10.4897 12.3964C10.4898 13.248 11.1148 14.0731 11.2018 14.1897C11.2887 14.3061 12.4088 16.1125 14.1772 16.8079C15.648 17.3868 15.9491 17.2702 16.2667 17.2402C16.5844 17.2101 17.296 16.8211 17.443 16.4154C17.5867 16.0096 17.5867 15.6639 17.5433 15.5905C17.4998 15.5173 17.3827 15.4736 17.2089 15.3871C17.0345 15.3003 16.1793 14.8819 16.0189 14.822C15.8585 14.7655 15.7417 14.7353 15.6281 14.908C15.5111 15.081 15.1764 15.4706 15.0761 15.5871C14.9759 15.7033 14.8721 15.7168 14.6984 15.6304C14.5245 15.5439 13.9632 15.3605 13.2982 14.7685C12.7802 14.3095 12.429 13.7408 12.3286 13.5676C12.2283 13.3946 12.3186 13.3015 12.4055 13.215C12.4824 13.1385 12.5795 13.0118 12.6664 12.9119C12.7532 12.8122 12.7834 12.7389 12.8402 12.6226C12.8969 12.5062 12.8699 12.4065 12.8265 12.3201C12.783 12.2369 12.4419 11.3782 12.2882 11.0355C12.1579 10.7463 12.021 10.7397 11.8974 10.7364C11.7971 10.7331 11.68 10.733 11.563 10.733Z" fill="currentColor" fill-opacity="0.8"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM14.0302 7C10.1892 7 7.0604 10.1107 7.06038 13.9368C7.05704 15.1577 7.37783 16.352 7.9895 17.4066L7 21L10.6903 20.0316C11.7098 20.5839 12.8567 20.8769 14.0234 20.877H14.0268C17.871 20.8769 21 17.7662 21 13.9402C21.0033 12.087 20.2777 10.3434 18.9606 9.03255C17.6469 7.72189 15.8954 7.00003 14.0302 7Z" fill="currentColor" fill-opacity="0.8"/>
+        </svg>`,
+
+        facebook: `<svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM15.6685 7.58333C13.7987 7.58333 12.5776 8.72769 12.5776 10.7985V12.6191H10.5V15.0083H12.5776V20.7835C12.9947 20.8497 13.4217 20.8832 13.8564 20.8832C14.2911 20.8832 14.7177 20.8497 15.1348 20.7835V15.0083H17.0414L17.4043 12.6191H15.1348V11.0697C15.1348 10.416 15.4514 9.77824 16.4678 9.77824H17.5V7.74455C17.4937 7.74346 16.5605 7.58334 15.6685 7.58333Z" fill="currentColor" fill-opacity="0.8"/>
+        </svg>`,
+
+        copied: `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#4AE84F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>`
+    };
+
+    return icons[platform as keyof typeof icons] || '';
+};
+---
+
+<div class="share-icon" set:html={getIcon(platform)} aria-label={ariaLabel} />
+
+<style>
+    .share-icon {
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: transform 0.2s ease;
+        color: var(--text-main);
+    }
+
+    .share-icon svg {
+        color: inherit;
+    }
+
+    /* Планшеты */
+    @media (min-width: 768px) and (max-width: 1023px) {
+        .share-icon {
+            width: 28px;
+            height: 28px;
+        }
+    }
+
+    /* Десктоп */
+    @media (min-width: 1024px) {
+        .share-icon {
+            width: 36px;
+            height: 36px;
+        }
+    }
+</style>