(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172import React from "react";import { Button } from "../ui";import { X, ExternalLink, Key, Bookmark, PenTool } from "lucide-react";import { AppleIcon } from "../common/Icons";import { useTranslation } from "react-i18next";
interface IOSShortcutModalProps { isOpen: boolean; onClose: () => void;}
export default function IOSShortcutModal({ isOpen, onClose,}: IOSShortcutModalProps) { const { t } = useTranslation(); if (!isOpen) return null;
return ( <div 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" onClick={onClose} > <div 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" onClick={(e) => e.stopPropagation()} > <div className="flex items-center justify-between px-6 py-4 border-b border-surface-200 dark:border-surface-800"> <div className="flex items-center gap-2"> <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"> <AppleIcon size={16} /> </div> <h2 className="text-lg font-semibold text-surface-900 dark:text-white"> {t("iosShortcut.title")} </h2> </div> <button onClick={onClose} className="p-2 text-surface-400 dark:text-surface-500 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-lg transition-colors" > <X size={20} /> </button> </div>
<div className="px-6 py-5 max-h-[70vh] overflow-y-auto space-y-6"> <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"> <video src="/shortcut_walkthrough.mp4" autoPlay muted loop playsInline controls className="w-full h-full object-contain" /> </div>
<div className="space-y-4"> <h3 className="text-sm font-semibold text-surface-900 dark:text-white uppercase tracking-wider"> {t("iosShortcut.howTo")} </h3>
<div className="space-y-3"> <div className="flex gap-3 text-sm"> <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"> 1 </div> <div> <p className="text-surface-900 dark:text-white font-medium"> {t("iosShortcut.step1Title")} </p> <a href="https://www.icloud.com/shortcuts/1e33ebf52f55431fae1e187cfe9738c3" target="_blank" rel="noopener noreferrer" 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" > <ExternalLink size={14} /> {t("iosShortcut.step1Link")} </a> </div> </div>
<div className="flex gap-3 text-sm"> <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"> 2 </div> <div> <p className="text-surface-900 dark:text-white font-medium flex items-center gap-1.5"> {t("iosShortcut.step2Title")}{" "} <Key size={14} className="text-surface-400" /> </p> <p className="text-surface-600 dark:text-surface-400 mt-0.5"> {t("iosShortcut.step2Description")} </p> </div> </div>
<div className="flex gap-3 text-sm"> <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"> 3 </div> <div> <p className="text-surface-900 dark:text-white font-medium"> {t("iosShortcut.step3Title")} </p> <p className="text-surface-600 dark:text-surface-400 mt-0.5"> {t("iosShortcut.step3Description")} </p> </div> </div>
<div className="flex gap-3 text-sm"> <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"> 4 </div> <div> <p className="text-surface-900 dark:text-white font-medium flex items-center gap-1.5"> {t("iosShortcut.step4Title")}{" "} <Bookmark size={14} className="text-surface-400" /> </p> <p className="text-surface-600 dark:text-surface-400 mt-0.5"> {t("iosShortcut.step4Description")} </p> </div> </div>
<div className="flex gap-3 text-sm"> <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"> 5 </div> <div> <p className="text-surface-900 dark:text-white font-medium flex items-center gap-1.5"> {t("iosShortcut.step5Title")}{" "} <PenTool size={14} className="text-surface-400" /> </p> <p className="text-surface-600 dark:text-surface-400 mt-0.5"> {t("iosShortcut.step5Description")} </p> </div> </div>
<div className="flex gap-3 text-sm"> <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"> 6 </div> <div> <p className="text-surface-900 dark:text-white font-medium"> {t("iosShortcut.step6Title")} </p> <p className="text-surface-600 dark:text-surface-400 mt-0.5"> {t("iosShortcut.step6Description")} </p> </div> </div> </div> </div> </div>
<div className="px-6 py-4 bg-surface-50 dark:bg-surface-800/50 border-t border-surface-200 dark:border-surface-800"> <Button onClick={onClose} variant="primary" className="w-full justify-center" > {t("iosShortcut.gotIt")} </Button> </div> </div> </div> );}