79 lines
1.7 KiB
TypeScript
79 lines
1.7 KiB
TypeScript
import { useAuth } from "@/contexts/auth-context";
|
|
import {
|
|
createTheme,
|
|
MantineProvider as MantineProviderCore,
|
|
} from "@mantine/core";
|
|
import ColorSchemeProvider from "./color-scheme-provider";
|
|
import { useState, useEffect, useMemo } from "react";
|
|
|
|
const commonInputStyles = {
|
|
label: {
|
|
padding: 5,
|
|
},
|
|
root: {
|
|
margin: "0",
|
|
},
|
|
};
|
|
|
|
const theme = createTheme({
|
|
defaultRadius: "sm",
|
|
fontFamily: '"Inter", sans-serif',
|
|
headings: { fontFamily: '"League Spartan", sans-serif' },
|
|
components: {
|
|
TextInput: {
|
|
styles: commonInputStyles,
|
|
},
|
|
DateTimePicker: {
|
|
styles: commonInputStyles,
|
|
},
|
|
Input: {
|
|
styles: commonInputStyles,
|
|
},
|
|
Select: {
|
|
styles: commonInputStyles,
|
|
},
|
|
Autocomplete: {
|
|
styles: commonInputStyles,
|
|
},
|
|
DateTiemPicker: {
|
|
styles: {
|
|
root: {
|
|
zIndex: 1000,
|
|
},
|
|
input: {
|
|
zIndex: 1000,
|
|
backgroundColor: "red",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
const MantineProvider = ({ children }: { children: React.ReactNode }) => {
|
|
const { metadata } = useAuth();
|
|
const [isHydrated, setIsHydrated] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsHydrated(true);
|
|
}, []);
|
|
|
|
const colorScheme = isHydrated ? metadata.colorScheme || "auto" : "auto";
|
|
const primaryColor = isHydrated ? metadata.accentColor || "blue" : "blue";
|
|
|
|
const themeWithPrimaryColor = useMemo(
|
|
() => ({ ...theme, primaryColor }),
|
|
[primaryColor]
|
|
);
|
|
|
|
return (
|
|
<MantineProviderCore
|
|
defaultColorScheme={colorScheme}
|
|
theme={themeWithPrimaryColor}
|
|
>
|
|
<ColorSchemeProvider>{children}</ColorSchemeProvider>
|
|
</MantineProviderCore>
|
|
);
|
|
};
|
|
|
|
export default MantineProvider;
|