fix: harden PWA install prompt

This commit is contained in:
AgendaPro Dev
2026-07-27 16:32:58 -06:00
parent 0238dff5b1
commit 9ded129478
5 changed files with 44 additions and 12 deletions
+25 -4
View File
@@ -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>
);
}