significant refactor

src/lib/mantine/mantine-provider.tsx

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