Move components to ui

components/ui/SafeArea.jsx

@@ -0,0 +1,30 @@
+import { createContext, useEffect, useState } from 'react';
+
+export const SafeAreaContext = createContext({ top: 0, bottom: 0 });
+
+export const SafeAreaProvider = ({ children }) => {
+  const [safeAreaTop, setSafeAreaTop] = useState(0);
+  const [safeAreaBottom, setSafeAreaBottom] = useState(0);
+
+  useEffect(() => {
+    // I don't know why, but we can't get the value of this CSS variable
+    // until a bit of a delay, maybe something with Next?
+    setTimeout(() => {
+      const safeAreaTop = parseInt(
+        window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-top')
+      );
+      const safeAreaBottom = window
+        .getComputedStyle(document.documentElement)
+        .getPropertyValue('--safe-area-bottom');
+
+      setSafeAreaTop(safeAreaTop);
+      setSafeAreaBottom(safeAreaBottom);
+    }, 500);
+  }, []);
+
+  return (
+    <SafeAreaContext.Provider value={{ top: safeAreaTop, bottom: safeAreaBottom }}>
+      {children}
+    </SafeAreaContext.Provider>
+  );
+};