fix: harden PWA install prompt
This commit is contained in:
@@ -3,16 +3,26 @@ import { Download, PlusSquare, Share } from "lucide-react";
|
||||
import { Modal } from "./Modal";
|
||||
import { useInstallPrompt } from "../lib/useInstallPrompt";
|
||||
|
||||
export function InstallAppPrompt() {
|
||||
export function InstallAppPrompt({ compact = false }: { compact?: boolean }) {
|
||||
const { state, install } = useInstallPrompt();
|
||||
const [iosOpen, setIosOpen] = useState(false);
|
||||
const buttonClassName = compact
|
||||
? "btn btn-secondary h-9 w-9 shrink-0 justify-center p-0"
|
||||
: "btn btn-secondary w-full justify-start";
|
||||
|
||||
if (state === "unsupported" || state === "installed") return null;
|
||||
if (state === "ios-instructions") {
|
||||
return (
|
||||
<>
|
||||
<button type="button" className="btn btn-secondary w-full justify-start" onClick={() => setIosOpen(true)}>
|
||||
<Download className="h-4 w-4" /> Instalar AgendaMax
|
||||
<button
|
||||
type="button"
|
||||
className={buttonClassName}
|
||||
aria-label="Instalar AgendaMax"
|
||||
title={compact ? "Instalar AgendaMax" : undefined}
|
||||
onClick={() => setIosOpen(true)}
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
<span className={compact ? "sr-only" : undefined}>Instalar AgendaMax</span>
|
||||
</button>
|
||||
<Modal open={iosOpen} onClose={() => setIosOpen(false)} title="Instalar AgendaMax" subtitle="Safari lo añade a tu pantalla de inicio.">
|
||||
<div className="safe-area-bottom">
|
||||
@@ -25,5 +35,16 @@ export function InstallAppPrompt() {
|
||||
</>
|
||||
);
|
||||
}
|
||||
return <button type="button" className="btn btn-secondary w-full justify-start" onClick={() => void install()}><Download className="h-4 w-4" /> Instalar AgendaMax</button>;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={buttonClassName}
|
||||
aria-label="Instalar AgendaMax"
|
||||
title={compact ? "Instalar AgendaMax" : undefined}
|
||||
onClick={() => void install()}
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
<span className={compact ? "sr-only" : undefined}>Instalar AgendaMax</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user