(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1import React from "react";
2import { Button } from "../ui";
3import { X, ExternalLink, Key, Bookmark, PenTool } from "lucide-react";
4import { AppleIcon } from "../common/Icons";
5import { useTranslation } from "react-i18next";
6
7interface IOSShortcutModalProps {
8 isOpen: boolean;
9 onClose: () => void;
10}
11
12export default function IOSShortcutModal({
13 isOpen,
14 onClose,
15}: IOSShortcutModalProps) {
16 const { t } = useTranslation();
17 if (!isOpen) return null;
18
19 return (
20 <div
21 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"
22 onClick={onClose}
23 >
24 <div
25 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"
26 onClick={(e) => e.stopPropagation()}
27 >
28 <div className="flex items-center justify-between px-6 py-4 border-b border-surface-200 dark:border-surface-800">
29 <div className="flex items-center gap-2">
30 <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">
31 <AppleIcon size={16} />
32 </div>
33 <h2 className="text-lg font-semibold text-surface-900 dark:text-white">
34 {t("iosShortcut.title")}
35 </h2>
36 </div>
37 <button
38 onClick={onClose}
39 className="p-2 text-surface-400 dark:text-surface-500 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-lg transition-colors"
40 >
41 <X size={20} />
42 </button>
43 </div>
44
45 <div className="px-6 py-5 max-h-[70vh] overflow-y-auto space-y-6">
46 <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">
47 <video
48 src="/shortcut_walkthrough.mp4"
49 autoPlay
50 muted
51 loop
52 playsInline
53 controls
54 className="w-full h-full object-contain"
55 />
56 </div>
57
58 <div className="space-y-4">
59 <h3 className="text-sm font-semibold text-surface-900 dark:text-white uppercase tracking-wider">
60 {t("iosShortcut.howTo")}
61 </h3>
62
63 <div className="space-y-3">
64 <div className="flex gap-3 text-sm">
65 <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">
66 1
67 </div>
68 <div>
69 <p className="text-surface-900 dark:text-white font-medium">
70 {t("iosShortcut.step1Title")}
71 </p>
72 <a
73 href="https://www.icloud.com/shortcuts/1e33ebf52f55431fae1e187cfe9738c3"
74 target="_blank"
75 rel="noopener noreferrer"
76 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"
77 >
78 <ExternalLink size={14} /> {t("iosShortcut.step1Link")}
79 </a>
80 </div>
81 </div>
82
83 <div className="flex gap-3 text-sm">
84 <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">
85 2
86 </div>
87 <div>
88 <p className="text-surface-900 dark:text-white font-medium flex items-center gap-1.5">
89 {t("iosShortcut.step2Title")}{" "}
90 <Key size={14} className="text-surface-400" />
91 </p>
92 <p className="text-surface-600 dark:text-surface-400 mt-0.5">
93 {t("iosShortcut.step2Description")}
94 </p>
95 </div>
96 </div>
97
98 <div className="flex gap-3 text-sm">
99 <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">
100 3
101 </div>
102 <div>
103 <p className="text-surface-900 dark:text-white font-medium">
104 {t("iosShortcut.step3Title")}
105 </p>
106 <p className="text-surface-600 dark:text-surface-400 mt-0.5">
107 {t("iosShortcut.step3Description")}
108 </p>
109 </div>
110 </div>
111
112 <div className="flex gap-3 text-sm">
113 <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">
114 4
115 </div>
116 <div>
117 <p className="text-surface-900 dark:text-white font-medium flex items-center gap-1.5">
118 {t("iosShortcut.step4Title")}{" "}
119 <Bookmark size={14} className="text-surface-400" />
120 </p>
121 <p className="text-surface-600 dark:text-surface-400 mt-0.5">
122 {t("iosShortcut.step4Description")}
123 </p>
124 </div>
125 </div>
126
127 <div className="flex gap-3 text-sm">
128 <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">
129 5
130 </div>
131 <div>
132 <p className="text-surface-900 dark:text-white font-medium flex items-center gap-1.5">
133 {t("iosShortcut.step5Title")}{" "}
134 <PenTool size={14} className="text-surface-400" />
135 </p>
136 <p className="text-surface-600 dark:text-surface-400 mt-0.5">
137 {t("iosShortcut.step5Description")}
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 6
145 </div>
146 <div>
147 <p className="text-surface-900 dark:text-white font-medium">
148 {t("iosShortcut.step6Title")}
149 </p>
150 <p className="text-surface-600 dark:text-surface-400 mt-0.5">
151 {t("iosShortcut.step6Description")}
152 </p>
153 </div>
154 </div>
155 </div>
156 </div>
157 </div>
158
159 <div className="px-6 py-4 bg-surface-50 dark:bg-surface-800/50 border-t border-surface-200 dark:border-surface-800">
160 <Button
161 onClick={onClose}
162 variant="primary"
163 className="w-full justify-center"
164 >
165 {t("iosShortcut.gotIt")}
166 </Button>
167 </div>
168 </div>
169 </div>
170 );
171}