// Shared components for Fortune VPN ЛК — Sidebar, TopBar, Card, Hero, Modal, Icons. // All built against the design tokens in tokens.css. // ── Lucide-style stroke icons (1.75–2px, 22px box) ───────────────────── const Icon = ({ d, size = 22, sw = 2, fill = "none", children }) => ( {children || } ); const Icons = { home: () => , phone: () => , key: () => , gift: () => , users: () => , receipt: () => , settings:() => , logout: () => , copy: () => , qr: () => , refresh: () => , check: () => , alert: () => , info: () => , download:() => , external:() => , edit: () => , x: () => , arrow: () => , back: () => , search: () => , trash: () => , shield: () => , send: () => , menu: () => , // ── Platform / client icons ────────────────────────────────────────── // Android — silhouette робота (плоская заливка, узнаваемая силуэтка). android: () => ( ), // iOS / Apple — каноничный силуэт яблока (узнаваем мгновенно). apple: () => ( ), // V2Ray — клиент-прокси. У бренда нет публичного icon-mark, делаем узнаваемую «V» в круге. v2ray: () => ( ), // Incy — клиент-прокси. У бренда тоже нет icon-mark, делаем «I» в скруглённом квадрате. incy: () => ( ), }; // ── Logo (matches landing) ──────────────────────────────────────────── const Logo = ({ size = 26 }) => (
Fortune VPN Fortune VPN
); // Map route → page title for the top bar. const ROUTE_TITLES = { home: "Главная", keys: "Подписка", "keys-empty": "Подписка", "keys-checkout": "Оформление подписки", "buy-start": "Оформление подписки", redeem: "Ваучер", referral: "Друзья", billing: "Платежи и чеки", settings: "Настройки", "setup-v2ray": "Инструкция · V2Ray", "setup-incy": "Инструкция · Incy", "setup-android": "Инструкция · Android", "setup-ios": "Инструкция · iOS", }; // Claude Code-style panel-left иконка. Состояние различается заливкой левой колонки: // Sidebar открыт → левая колонка ЗАЛИТА (sidebar присутствует) // Sidebar свёрнут → колонка-контур (sidebar отсутствует / спрятан) // Никаких стрелок — направление не врёт. const SidebarCollapseIcon = ({ size = 18 }) => ( {/* Заливка левой колонки = «sidebar сейчас виден» */} ); const SidebarExpandIcon = ({ size = 18 }) => ( {/* Без заливки = «sidebar спрятан» */} ); // Mac → ⌘B, Win/Linux → Ctrl+B (для tooltip) const SHORTCUT_LABEL = (() => { if (typeof navigator === "undefined") return "(Ctrl+B)"; const isMac = /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent); return isMac ? "(⌘B)" : "(Ctrl+B)"; })(); // Burger / close icons inline so we don't depend on extra Icon definitions. const BurgerIcon = ({ open }) => ( {open ? ( ) : ( )} ); // ── Top bar — page title + user. На мобиле слева бургер для drawer. const TopBar = ({ email, active }) => { const ua = window.useAppState ? window.useAppState() : window.appState; const userEmail = email || ua?.user?.email; const title = ROUTE_TITLES[active] || "Личный кабинет"; const drawerOpen = !!ua?.sidebar?.drawerOpen; return (
{/* Burger button — visible only on mobile via CSS class */}

{title}

{userEmail ? (
{userEmail}
{userEmail[0].toUpperCase()}
) : ( Войти )}
); }; // ── Footer (mirrors landing) ───────────────────────────────────────── const Footer = () => ( ); const FooterCol = ({ title, children }) => (

{title}

{children}
); const FooterLink = ({ href, external, children }) => ( {children} ); // ── Sidebar ──────────────────────────────────────────────────────────── const SoonBadge = () => ( скоро ); const SidebarItem = ({ icon: I, label, active, danger, soon, onClick, collapsed }) => (
{!collapsed && {label}} {!collapsed && soon && }
); // Контекстный CTA «Активировать код» — отдельно от основной нав. // Визуально выделен (dashed border + gift-иконка), на свёрнутом sidebar — только иконка. // Прячется, если у юзера уже активная подписка и нет ваучера для активации // (юзер всё ещё может попасть на /redeem через прямой URL или через empty-state). const RedeemCTA = ({ active, collapsed, onClick }) => { const ua = window.useAppState ? window.useAppState() : window.appState; const hasActiveSub = ua?.entitlement?.status === "active"; // Если подписка уже активна — CTA становится менее заметным (приглушённый). // Но не прячем совсем — юзер может получить ещё один ваучер (подарок, докупка). const muted = hasActiveSub; const margin = collapsed ? "0 0 14px" : "0 0 16px"; if (collapsed) { return (
); } return ( ); }; // Small logo-icon-only (используется в свёрнутом sidebar). Кликабельно → лендинг. const LogoIconOnly = () => ( Fortune VPN ); const Sidebar = ({ active = "home" }) => { const ua = window.useAppState ? window.useAppState() : window.appState; const collapsed = !!ua?.sidebar?.collapsed; const go = (r) => () => { if (window.actions) window.actions.closeDrawer(); // на мобиле закрыть drawer после клика if (window.navigate) window.navigate(r); }; const toggle = () => window.actions && window.actions.toggleSidebar(); const logout = () => { if (window.actions) window.actions.logout(); }; const width = collapsed ? 68 : 240; return (
{/* Header: logo + toggle */}
{collapsed ? ( ) : ( )} {!collapsed && ( )}
{/* Развернуть-кнопка в свёрнутом виде — отдельной строкой под лого. Стрелка наружу. */} {collapsed && ( )}
{/* Группа: инструкции по клиентам подключения */} {!collapsed && (
Инструкции
)} {collapsed &&
}
); }; // ── Page shell (sidebar + topbar + scroll content). Без большого футера — // маркетинговые ссылки живут на лендинге, дашборд — рабочее пространство. const Shell = ({ active, children, email, screenLabel }) => { const ua = window.useAppState ? window.useAppState() : window.appState; const drawerOpen = !!ua?.sidebar?.drawerOpen; return (
{/* Mobile backdrop: на десктопе скрыт через CSS, на мобиле появляется только когда drawerOpen */} {drawerOpen && (
window.actions.closeDrawer()} className="lk-drawer-backdrop" aria-hidden="true" /> )}
{children}
); }; // Тонкая полоска внизу: copyright + ссылка на поддержку. Один ряд, приглушённо. const ShellFooter = () => ( ); // ── Eyebrow pill (chip + text + dot) ────────────────────────────────── const EyebrowPill = ({ chip, text, kind = "ok" }) => (
{chip} {text}
); // ── Hero (Доступ) ──────────────────────────────────────────────────── // dateTone: 'ok' (gradient), 'warn' (orange), 'danger' (red) const HeroLine = ({ label, dateLabel, dateTone = "ok", primaryAction = "Продлить", ghostAction = "Управлять" }) => { const dateColor = dateTone === "warn" ? "var(--warning)" : dateTone === "danger" ? "var(--danger)" : null; return (
{label} —{" "} {dateColor ? {dateLabel} : {dateLabel}}
); }; const Hero = ({ pill, title, lines = [], note, children }) => (
{pill} {title && (
{title}
)} {lines.length > 0 && (
{lines.map((l, i) => )}
)} {children} {note &&
{note}
}
); // ── Card (.ps remix) with mouse glow ─────────────────────────────────── const PsCard = ({ children, style, onClick }) => { const ref = React.useRef(null); const onMove = (e) => { const r = ref.current.getBoundingClientRect(); ref.current.style.setProperty("--mx", `${e.clientX - r.left}px`); ref.current.style.setProperty("--my", `${e.clientY - r.top}px`); }; return (
{children}
); }; const PsIcon = ({ icon: I }) => (
); // ── Badge ───────────────────────────────────────────────────────────── const Badge = ({ kind = "active", children }) => { const cls = { active: "badge-active", warn: "badge-warn", danger: "badge-danger", pending: "badge-pending", }[kind] || "badge-pending"; return ( {children} ); }; // ── Section header inside content ───────────────────────────────────── const SectionHeader = ({ eyebrow, title, badge, action }) => (
{eyebrow &&
{eyebrow}
}

{title}

{badge}
{action}
); // ── Assumption note ─────────────────────────────────────────────────── const Assumption = ({ kind = "ASSUMPTION", children }) => (
{kind} {children}
); // ── Modal shell (used inside artboards to mock M1–M6) ───────────────── const ModalShell = ({ title, children, primary, primaryKind = "primary", ghost = "Отмена", onClose }) => (

{title}

{children}
{primary && }
); // ── Auth-only narrow shell ──────────────────────────────────────────── const AuthShell = ({ children, screenLabel }) => (
{children}
© Fortune Tavern Limited
); // expose to other Babel files Object.assign(window, { Icons, Icon, Logo, TopBar, Sidebar, SidebarItem, Shell, AuthShell, Footer, FooterCol, FooterLink, EyebrowPill, Hero, HeroLine, PsCard, PsIcon, Badge, SectionHeader, Assumption, ModalShell, });