Graphical PDS migrator for AT Protocol
knotbin.com
1export interface MigrationCompletionProps {
2 isVisible: boolean;
3}
4
5export default function MigrationCompletion(
6 { isVisible }: MigrationCompletionProps,
7) {
8 if (!isVisible) return null;
9
10 const handleLogout = async () => {
11 try {
12 const response = await fetch("/api/logout", {
13 method: "POST",
14 credentials: "include",
15 });
16 if (!response.ok) {
17 throw new Error("Logout failed");
18 }
19 globalThis.location.href = "/";
20 } catch (error) {
21 console.error("Failed to logout:", error);
22 }
23 };
24
25 return (
26 <div class="p-4 bg-green-50 dark:bg-green-900 rounded-lg border-2 border-green-200 dark:border-green-800">
27 <p class="text-sm text-green-800 dark:text-green-200 pb-2">
28 Migration completed successfully! Sign out to finish the process and
29 return home.<br />
30 Please consider donating to Airport to support server and development
31 costs.
32 </p>
33 <div class="flex space-x-4">
34 <button
35 type="button"
36 onClick={handleLogout}
37 class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200 flex items-center space-x-2"
38 >
39 <svg
40 class="w-5 h-5"
41 fill="none"
42 stroke="currentColor"
43 viewBox="0 0 24 24"
44 >
45 <path
46 stroke-linecap="round"
47 stroke-linejoin="round"
48 stroke-width="2"
49 d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
50 />
51 </svg>
52 <span>Sign Out</span>
53 </button>
54 <a
55 href="https://ko-fi.com/knotbin"
56 target="_blank"
57 class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200 flex items-center space-x-2"
58 >
59 <svg
60 class="w-5 h-5"
61 fill="none"
62 stroke="currentColor"
63 viewBox="0 0 24 24"
64 >
65 <path
66 stroke-linecap="round"
67 stroke-linejoin="round"
68 stroke-width="2"
69 d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
70 />
71 </svg>
72 <span>Support Us</span>
73 </a>
74 </div>
75 </div>
76 );
77}