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 ? "opacity-50 cursor-not-allowed" : "opacity-100 cursor-pointer"}
27 onClick={(e: MouseEvent) => {
28 if (isMobile) {
29 e.preventDefault();
30 }
31 }}
32 />
33 </div>
34 );
35}