Function RootComponent

tanstack-example/app/routes/__root.tsx:48–303

()

});

function RootComponent() {
	const [theme, setTheme] = useState<"light" | "dark">("light");
	const { data, isPending, error } = useSession();
	const { navigate } = useRouter();
	console.log();

	useEffect(() => {
		if (!data?.user) {
			if (!location.pathname.includes("auth/")) {
				navigate({ to: "/auth/signin" });
			}
		} else {
			navigate({ to: "/" });
		}
		setTheme(
			window.matchMedia("(prefers-color-scheme: dark)").matches
				? "dark"
				: "light",
		);
	}, [data, navigate]);

	useEffect(() => {
		const root = window.document.documentElement;

		root.classList.remove("light", "dark");

		root.classList.add(theme);
	}, [theme]);

	return (
		<RootDocument>
			<nav className="grid grid-cols-3 items-center w-full p-4">
				<div className="flex items-center justify-center gap-2">
					<svg
						width="60"
						height="45"
						viewBox="0 0 60 45"
						fill="none"
						className="w-5 h-5"
						xmlns="http://www.w3.org/2000/svg"
					>
						<title>Better Auth</title>
						<path
							fillRule="evenodd"
							clipRule="evenodd"
							d="M0 0H15V15H30V30H15V45H0V30V15V0ZM45 30V15H30V0H45H60V15V30V45H45H30V30H45Z"
							className="fill-black dark:fill-white"
						/>
					</svg>
					<p>BETTER-AUTH</p>
					<p>x</p>
					<svg
						className="w-5 h-5"
						xmlns="http://www.w3.org/2000/svg"
						width="45"
						height="45"
						viewBox="0 0 100 100"
						fill="none"