Import source: src/app/providers
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
"use client";
|
||||
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { TooltipProvider } from "@radix-ui/react-tooltip";
|
||||
import { useUiStore } from "@/stores/ui-store";
|
||||
|
||||
export function Providers({ children }: { children: React.ReactNode }) {
|
||||
const queryClient = useMemo(
|
||||
() =>
|
||||
new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 30_000,
|
||||
refetchOnWindowFocus: false,
|
||||
},
|
||||
},
|
||||
}),
|
||||
[],
|
||||
);
|
||||
const theme = useUiStore((state) => state.theme);
|
||||
const density = useUiStore((state) => state.density);
|
||||
const accent = useUiStore((state) => state.accent);
|
||||
const glass = useUiStore((state) => state.glass);
|
||||
const radius = useUiStore((state) => state.radius);
|
||||
const ambiance = useUiStore((state) => state.ambiance);
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
const media = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
const apply = () => {
|
||||
root.classList.toggle("dark", theme === "dark" || (theme === "system" && media.matches));
|
||||
};
|
||||
apply();
|
||||
media.addEventListener("change", apply);
|
||||
return () => media.removeEventListener("change", apply);
|
||||
}, [theme]);
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
root.classList.toggle("density-compact", density === "compact");
|
||||
root.classList.toggle("density-comfortable", density === "comfortable");
|
||||
root.dataset.accent = accent;
|
||||
root.dataset.glass = glass;
|
||||
root.dataset.radius = radius;
|
||||
root.dataset.ambiance = ambiance ? "on" : "off";
|
||||
}, [density, accent, glass, radius, ambiance]);
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<TooltipProvider delayDuration={250}>{children}</TooltipProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user