pwa setting

2026-06-13 13:28:39 +03:30
parent 0b5d017b14
commit d50fb96542
15 changed files with 782 additions and 0 deletions
@@ -0,0 +1,45 @@
+import React from 'react';
+import { ArrowDownTrayIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { usePwaInstall } from '../../hooks/usePwaInstall';
+
+export default function PwaInstallBanner() {
+  const { promptEvent, isInstalled, isDismissed, install, dismiss } = usePwaInstall();
+
+  if (isInstalled || isDismissed || !promptEvent) return null;
+
+  const handleInstall = async () => {
+    await install();
+  };
+
+  return (
+    <div style={{
+      position: 'fixed', bottom: 20, right: 20, left: 20, zIndex: 9999,
+      maxWidth: 420, margin: '0 auto',
+      background: 'var(--surface)',
+      border: '1px solid var(--border)',
+      borderRadius: 'var(--r)',
+      boxShadow: '0 8px 32px rgba(0,0,0,.12)',
+      padding: '14px 16px',
+      display: 'flex', alignItems: 'center', gap: 12,
+      direction: 'rtl',
+    }}>
+      <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--primary-soft)', color: 'var(--primary-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+        <ArrowDownTrayIcon style={{ width: 18, height: 18 }} />
+      </div>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <p style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', margin: 0 }}>نصب ClinicPro</p>
+        <p style={{ fontSize: 12, color: 'var(--text-3)', margin: '2px 0 0' }}>دسترسی سریع‌تر از روی صفحه اصلی</p>
+      </div>
+      <button
+        onClick={handleInstall}
+        style={{ height: 34, padding: '0 14px', borderRadius: 'var(--r-sm)', border: 'none', background: 'var(--primary)', color: 'var(--on-primary)', fontSize: 13, fontWeight: 700, cursor: 'pointer', flexShrink: 0 }}>
+        نصب
+      </button>
+      <button
+        onClick={dismiss}
+        style={{ width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--text-3)', borderRadius: 6, flexShrink: 0 }}>
+        <XMarkIcon style={{ width: 16, height: 16 }} />
+      </button>
+    </div>
+  );
+}