2025-02-19 14:31:59 -06:00
|
|
|
"use client";
|
|
|
|
|
import { useSettingsStore } from "@/lib/hooks/use-settings-store";
|
|
|
|
|
import { Inter, Roboto } from "next/font/google";
|
|
|
|
|
import { useEffect, useState, type ReactNode } from "react";
|
|
|
|
|
import { GeistSans } from "geist/font/sans";
|
2025-02-22 10:38:19 -06:00
|
|
|
import { usePathname } from "next/navigation";
|
2025-02-19 14:31:59 -06:00
|
|
|
|
|
|
|
|
const inter = Inter({ subsets: ["latin"] });
|
|
|
|
|
const roboto = Roboto({
|
|
|
|
|
subsets: ["latin"],
|
|
|
|
|
weight: ["100", "300", "400", "500", "700", "900"],
|
|
|
|
|
});
|
2025-02-22 10:38:19 -06:00
|
|
|
const overflowXHiddenPages = ["/home"];
|
2025-02-19 14:31:59 -06:00
|
|
|
|
|
|
|
|
export function FontBoundary({
|
|
|
|
|
children,
|
|
|
|
|
}: {
|
|
|
|
|
children?: ReactNode | ReactNode[];
|
|
|
|
|
}) {
|
|
|
|
|
const settingsStore = useSettingsStore();
|
|
|
|
|
const [fontFamily, setFontFamily] = useState("inter");
|
2025-02-22 10:38:19 -06:00
|
|
|
const pathname = usePathname();
|
2025-02-19 14:31:59 -06:00
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setFontFamily((settingsStore.get("font-family") ?? "inter") as string);
|
|
|
|
|
window.addEventListener("font-family-change", () => {
|
|
|
|
|
setFontFamily((settingsStore.get("font-family") ?? "inter") as string);
|
|
|
|
|
});
|
|
|
|
|
}, [settingsStore]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<body
|
|
|
|
|
className={`font-${fontFamily} ${(() => {
|
|
|
|
|
switch (fontFamily) {
|
|
|
|
|
case "geist-sans":
|
|
|
|
|
return GeistSans.className;
|
|
|
|
|
case "roboto":
|
|
|
|
|
return roboto.className;
|
|
|
|
|
case "inter":
|
|
|
|
|
return inter.className;
|
|
|
|
|
default:
|
|
|
|
|
return "system-ui-font--font-boundary";
|
|
|
|
|
}
|
2025-02-22 10:38:19 -06:00
|
|
|
})()} ${pathname !== null && overflowXHiddenPages.includes(pathname) ? "overflow-x-hidden" : ""}`}
|
2025-02-19 14:31:59 -06:00
|
|
|
>
|
|
|
|
|
{children}
|
|
|
|
|
</body>
|
|
|
|
|
);
|
|
|
|
|
}
|
