Added a login guard

app/components/guard.tsx

@@ -0,0 +1,62 @@
+import type { PropsWithChildren } from "react";
+import { useNavigate } from "react-router";
+import { useAuth } from "~/hooks/auth";
+import { Button, Modal, Spinner } from "@heroui/react";
+
+export default function Guard({ children }: PropsWithChildren) {
+    const { user, loading, login, logout } = useAuth();
+    const navigate = useNavigate();
+
+    if (loading) {
+        return (
+            <div className="flex flex-col flex-1 h-full w-full justify-center items-center">
+                <Spinner color="current" size="xl" />
+            </div>
+        );
+    }
+
+    if (user !== null) {
+        return children;
+    }
+
+    return (
+        <>
+            <div className="h-dvh w-dvw blur-2xl">
+                <Modal>
+                    <Modal.Backdrop
+                        isDismissable={false}
+                        isKeyboardDismissDisabled
+                        isOpen
+                    >
+                        <Modal.Container>
+                            <Modal.Dialog>
+                                <Modal.Header>
+                                    <Modal.Heading>
+                                        Login required.
+                                    </Modal.Heading>
+                                </Modal.Header>
+                                <Modal.Body>
+                                    <p>
+                                        To view this page, you need to be logged
+                                        in with your Steam account.
+                                    </p>
+                                </Modal.Body>
+                                <Modal.Footer>
+                                    <Button
+                                        variant="secondary"
+                                        onClick={() => {
+                                            navigate(-1);
+                                        }}
+                                    >
+                                        Cancel
+                                    </Button>
+                                    <Button onClick={login}>Login</Button>
+                                </Modal.Footer>
+                            </Modal.Dialog>
+                        </Modal.Container>
+                    </Modal.Backdrop>
+                </Modal>
+            </div>
+        </>
+    );
+}