89 lines
4.2 KiB
JavaScript
89 lines
4.2 KiB
JavaScript
import React from "react";
|
||
import { Badge } from "../UI/Badge";
|
||
import { Button } from "../UI/Button";
|
||
import { Panel } from "../UI/Panel";
|
||
|
||
const statusConfig = {
|
||
online: { label: "Онлайн", tone: "accent" },
|
||
offline: { label: "Офлайн", tone: "warning" },
|
||
installed: { label: "Установлено", tone: "accent" },
|
||
browser: { label: "В браузере", tone: "neutral" },
|
||
ready: { label: "Офлайн готов", tone: "accent" },
|
||
pending: { label: "Кешируется", tone: "neutral" },
|
||
};
|
||
|
||
export const PwaDemoPanel = ({
|
||
isOnline,
|
||
isInstallAvailable,
|
||
isInstalled,
|
||
isOfflineReady,
|
||
onInstall,
|
||
}) => {
|
||
const networkBadge = isOnline ? statusConfig.online : statusConfig.offline;
|
||
const installBadge = isInstalled ? statusConfig.installed : statusConfig.browser;
|
||
const offlineBadge = isOfflineReady ? statusConfig.ready : statusConfig.pending;
|
||
|
||
return (
|
||
<Panel className="p-6">
|
||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||
<div className="space-y-2">
|
||
<p className="text-sm uppercase tracking-[0.2em] text-[var(--color-text-muted)]">
|
||
Демо и PWA
|
||
</p>
|
||
<h3 className="text-xl font-semibold">Что это и зачем для демонстрации</h3>
|
||
<p className="max-w-3xl text-sm leading-6 text-[var(--color-text-muted)]">
|
||
PWA превращает веб-приложение в устанавливаемый рабочий экран: его можно открыть как
|
||
отдельное приложение и использовать для показа сценариев после первого запуска.
|
||
</p>
|
||
</div>
|
||
|
||
{isInstallAvailable ? (
|
||
<Button variant="secondary" onClick={onInstall}>
|
||
Установить приложение
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="mt-5 flex flex-wrap gap-2">
|
||
<Badge tone={networkBadge.tone}>{networkBadge.label}</Badge>
|
||
<Badge tone={installBadge.tone}>{installBadge.label}</Badge>
|
||
<Badge tone={offlineBadge.tone}>{offlineBadge.label}</Badge>
|
||
</div>
|
||
|
||
<div className="mt-6 grid gap-4 lg:grid-cols-2">
|
||
<div className="rounded-[24px] bg-[var(--color-surface-strong)] p-5">
|
||
<h4 className="text-sm font-semibold uppercase tracking-[0.12em] text-[var(--color-text-muted)]">
|
||
Что это
|
||
</h4>
|
||
<p className="mt-3 text-sm leading-6 text-[var(--color-text-muted)]">
|
||
Это PWA-версия панели: её можно установить на ноутбук или телефон и запускать без
|
||
адресной строки браузера.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="rounded-[24px] bg-[var(--color-surface-strong)] p-5">
|
||
<h4 className="text-sm font-semibold uppercase tracking-[0.12em] text-[var(--color-text-muted)]">
|
||
Зачем для демо
|
||
</h4>
|
||
<p className="mt-3 text-sm leading-6 text-[var(--color-text-muted)]">
|
||
После первого запуска оболочка кешируется, поэтому дашборд и демо-данные можно
|
||
показать даже без интернета.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 rounded-[24px] border border-[var(--color-border)] bg-[var(--color-accent-soft)] p-5">
|
||
<p className="text-sm font-medium">Как работает офлайн-демо</p>
|
||
<p className="mt-2 text-sm leading-6 text-[var(--color-text-muted)]">
|
||
Демо-данные доступны локально: роли, вход по коду `000000`, заказы, статусы и обзор
|
||
дашборда продолжают работать после первого запуска.
|
||
</p>
|
||
<p className="mt-2 text-sm leading-6 text-[var(--color-text-muted)]">
|
||
Интеграции и рабочая база требуют подключения, поэтому Supabase и боевые сценарии
|
||
остаются сетевыми.
|
||
</p>
|
||
</div>
|
||
</Panel>
|
||
);
|
||
};
|