Graphical PDS migrator for AT Protocol
knotbin.com
1import { useEffect, useState } from "preact/hooks";
2import { Button } from "../components/Button.tsx";
3
4export default function LoginButton() {
5 const [isMobile, setIsMobile] = useState(true); // Default to mobile for SSR
6
7 useEffect(() => {
8 const checkMobile = () => {
9 setIsMobile(globalThis.innerWidth < 640);
10 };
11
12 // Check on mount
13 checkMobile();
14
15 // Listen for resize events
16 globalThis.addEventListener("resize", checkMobile);
17 return () => globalThis.removeEventListener("resize", checkMobile);
18 }, []);
19
20 return (
21 <div class="mt-6 sm:mt-8 text-center w-fit mx-auto">
22 <Button
23 href={isMobile ? undefined : "/login"}
24 color="blue"
25 label={isMobile ? "MOBILE NOT SUPPORTED" : "GET STARTED"}
26 className={isMobile
27 ? "opacity-50 cursor-not-allowed"
28 : "opacity-100 cursor-pointer"}
29 onClick={(e: MouseEvent) => {
30 if (isMobile) {
31 e.preventDefault();
32 }
33 }}
34 />
35 </div>
36 );
37}