margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
1import React from "react";
2import { Button } from "../ui";
3import {
4 X,
5 ExternalLink,
6 Key,
7 Share,
8 Bookmark,
9 PenTool,
10 MoreHorizontal,
11} from "lucide-react";
12import { AppleIcon } from "../common/Icons";
13
14interface IOSShortcutModalProps {
15 isOpen: boolean;
16 onClose: () => void;
17}
18
19export default function IOSShortcutModal({
20 isOpen,
21 onClose,
22}: IOSShortcutModalProps) {
23 if (!isOpen) return null;
24
25 return (
26 <div
27 className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm animate-fade-in overflow-y-auto"
28 onClick={onClose}
29 >
30 <div
31 className="bg-white dark:bg-surface-900 rounded-xl shadow-2xl max-w-lg w-full animate-scale-in ring-1 ring-surface-200 dark:ring-surface-700 overflow-hidden my-auto"
32 onClick={(e) => e.stopPropagation()}
33 >
34 <div className="flex items-center justify-between px-6 py-4 border-b border-surface-200 dark:border-surface-800">
35 <div className="flex items-center gap-2">
36 <div className="w-8 h-8 rounded-lg bg-surface-100 dark:bg-surface-800 flex items-center justify-center text-surface-900 dark:text-white">
37 <AppleIcon size={16} />
38 </div>
39 <h2 className="text-lg font-semibold text-surface-900 dark:text-white">
40 Save from iOS Safari
41 </h2>
42 </div>
43 <button
44 onClick={onClose}
45 className="p-2 text-surface-400 dark:text-surface-500 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-lg transition-colors"
46 >
47 <X size={20} />
48 </button>
49 </div>
50
51 <div className="px-6 py-5 max-h-[70vh] overflow-y-auto space-y-6">
52 <div className="rounded-xl overflow-hidden bg-surface-100 dark:bg-surface-800 ring-1 ring-surface-200 dark:ring-surface-700 aspect-[9/16] max-h-80 mx-auto flex items-center justify-center relative">
53 <video
54 src="/shortcut_walkthrough.mp4"
55 autoPlay
56 muted
57 loop
58 playsInline
59 controls
60 className="w-full h-full object-contain"
61 />
62 </div>
63
64 <div className="space-y-4">
65 <h3 className="text-sm font-semibold text-surface-900 dark:text-white uppercase tracking-wider">
66 How to use the shortcut
67 </h3>
68
69 <div className="space-y-3">
70 <div className="flex gap-3 text-sm">
71 <div className="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 flex items-center justify-center flex-shrink-0 font-medium text-xs mt-0.5">
72 1
73 </div>
74 <div>
75 <p className="text-surface-900 dark:text-white font-medium">
76 Install the shortcut
77 </p>
78 <a
79 href="https://www.icloud.com/shortcuts/1e33ebf52f55431fae1e187cfe9738c3"
80 target="_blank"
81 rel="noopener noreferrer"
82 className="inline-flex items-center gap-1.5 mt-1.5 px-3 py-1.5 bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 text-surface-900 dark:text-white rounded-lg text-xs font-medium transition-colors"
83 >
84 <ExternalLink size={14} /> Get iOS Shortcut
85 </a>
86 </div>
87 </div>
88
89 <div className="flex gap-3 text-sm">
90 <div className="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 flex items-center justify-center flex-shrink-0 font-medium text-xs mt-0.5">
91 2
92 </div>
93 <div>
94 <p className="text-surface-900 dark:text-white font-medium flex items-center gap-1.5">
95 Generate an API Key{" "}
96 <Key size={14} className="text-surface-400" />
97 </p>
98 <p className="text-surface-600 dark:text-surface-400 mt-0.5">
99 Create a new key on this settings page and copy it.
100 </p>
101 </div>
102 </div>
103
104 <div className="flex gap-3 text-sm">
105 <div className="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 flex items-center justify-center flex-shrink-0 font-medium text-xs mt-0.5">
106 3
107 </div>
108 <div>
109 <p className="text-surface-900 dark:text-white font-medium">
110 Configure the shortcut
111 </p>
112 <p className="text-surface-600 dark:text-surface-400 mt-0.5">
113 In the Shortcuts app, click the{" "}
114 <MoreHorizontal size={14} className="inline mx-0.5" /> menu
115 on the <strong>Save to Margin</strong> shortcut, and paste
116 your API key in the Text action right below the setup
117 comment.
118 </p>
119 </div>
120 </div>
121
122 <div className="flex gap-3 text-sm">
123 <div className="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 flex items-center justify-center flex-shrink-0 font-medium text-xs mt-0.5">
124 4
125 </div>
126 <div>
127 <p className="text-surface-900 dark:text-white font-medium flex items-center gap-1.5">
128 To Bookmark a page{" "}
129 <Bookmark size={14} className="text-surface-400" />
130 </p>
131 <p className="text-surface-600 dark:text-surface-400 mt-0.5">
132 Don't select any text. Click the{" "}
133 <MoreHorizontal size={14} className="inline mx-0.5" /> menu
134 in Safari, press{" "}
135 <Share size={12} className="inline mx-0.5" />{" "}
136 <strong>Share</strong>, and select{" "}
137 <strong>Save to Margin</strong>.
138 </p>
139 </div>
140 </div>
141
142 <div className="flex gap-3 text-sm">
143 <div className="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 flex items-center justify-center flex-shrink-0 font-medium text-xs mt-0.5">
144 5
145 </div>
146 <div>
147 <p className="text-surface-900 dark:text-white font-medium flex items-center gap-1.5">
148 To Highlight text{" "}
149 <PenTool size={14} className="text-surface-400" />
150 </p>
151 <p className="text-surface-600 dark:text-surface-400 mt-0.5">
152 Select text on the page, click the{" "}
153 <MoreHorizontal size={14} className="inline mx-0.5" /> menu,
154 press <strong>Share</strong>, and select{" "}
155 <strong>Save to Margin</strong>. Leave the Note field empty.
156 </p>
157 </div>
158 </div>
159
160 <div className="flex gap-3 text-sm">
161 <div className="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 flex items-center justify-center flex-shrink-0 font-medium text-xs mt-0.5">
162 6
163 </div>
164 <div>
165 <p className="text-surface-900 dark:text-white font-medium">
166 To Add an Annotation
167 </p>
168 <p className="text-surface-600 dark:text-surface-400 mt-0.5">
169 Select text, share to <strong>Save to Margin</strong> (via
170 the <MoreHorizontal size={14} className="inline mx-0.5" />{" "}
171 menu), enter your custom note in the Note field, and press
172 Done!
173 </p>
174 </div>
175 </div>
176 </div>
177 </div>
178 </div>
179
180 <div className="px-6 py-4 bg-surface-50 dark:bg-surface-800/50 border-t border-surface-200 dark:border-surface-800">
181 <Button
182 onClick={onClose}
183 variant="primary"
184 className="w-full justify-center"
185 >
186 Got it
187 </Button>
188 </div>
189 </div>
190 </div>
191 );
192}