46 lines
2.0 KiB
TypeScript
46 lines
2.0 KiB
TypeScript
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>
|
|
);
|
|
}
|