(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1import { useState } from "react";
2import { X } from "lucide-react";
3import { SiApple } from "react-icons/si";
4
5function shouldShowBanner() {
6 if (typeof window === "undefined") return false;
7 const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
8 if (!isIOS) return false;
9
10 const dismissedAt = localStorage.getItem("ios-shortcut-dismissed");
11 const daysSinceDismissed = dismissedAt
12 ? (Date.now() - parseInt(dismissedAt, 10)) / (1000 * 60 * 60 * 24)
13 : Infinity;
14 return daysSinceDismissed > 7;
15}
16
17export default function IOSInstallBanner() {
18 const [show, setShow] = useState(shouldShowBanner);
19
20 const handleDismiss = () => {
21 setShow(false);
22 localStorage.setItem("ios-shortcut-dismissed", Date.now().toString());
23 };
24
25 if (!show) return null;
26
27 return (
28 <div className="ios-shortcut-banner">
29 <button
30 className="ios-shortcut-banner-close"
31 onClick={handleDismiss}
32 aria-label="Dismiss"
33 >
34 <X size={14} />
35 </button>
36 <div className="ios-shortcut-banner-content">
37 <div className="ios-shortcut-banner-text">
38 <p>Save pages directly from Safari</p>
39 </div>
40 <a
41 href="https://www.icloud.com/shortcuts/21c87edf29b046db892c9e57dac6d1fd"
42 target="_blank"
43 rel="noopener noreferrer"
44 className="ios-shortcut-banner-btn"
45 >
46 <SiApple size={14} />
47 Get iOS Shortcut
48 </a>
49 </div>
50 </div>
51 );
52}