Icon component

components/ui/SafeArea.jsx

@@ -2,6 +2,14 @@ import { createContext, useEffect, useState } from 'react';
 
 export const SafeAreaContext = createContext({ top: 0, bottom: 0 });
 
+// This provider reads and stores the computed safe area
+// on devices with notches/etc. (iPhone X, for example)
+//
+// This is done by reading the CSS Properties --safe-area-top and --safe-area-bottom
+// and then storing them as state values.
+//
+// These values are useful for JS-driven interactions, such as a modal that
+// will drag in and out but needs to offset for the safe region.
 export const SafeAreaProvider = ({ children }) => {
   const [safeAreaTop, setSafeAreaTop] = useState(0);
   const [safeAreaBottom, setSafeAreaBottom] = useState(0);