init

src/lib/mantine/mantine-provider.tsx

@@ -0,0 +1,59 @@
+import { useAuth } from "@/contexts/auth-context";
+import { createTheme, MantineProvider as MantineProviderCore } from "@mantine/core";
+import ColorSchemeProvider from "./color-scheme-provider";
+
+const commonInputStyles = {
+  label: {
+    padding: 5
+  },
+  root: {
+    margin: '0'
+  }
+}
+
+const theme = createTheme({
+  defaultRadius: 'sm',
+  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()
+
+  return <MantineProviderCore
+    defaultColorScheme={metadata.colorScheme || 'auto'}
+    theme={{ ...theme, primaryColor: metadata.accentColor || 'blue' }}
+  >
+    <ColorSchemeProvider>
+      {children}
+    </ColorSchemeProvider>
+  </MantineProviderCore>
+}
+
+export default MantineProvider;