[#17986] feat: add overlay component

src/quo/components/overlay/style.cljs

@@ -0,0 +1,13 @@
+(ns quo.components.overlay.style)
+
+(defn overlay-background
+  [background-color]
+  {:position         :absolute
+   :top              0
+   :left             0
+   :right            0
+   :bottom           0
+   :background-color background-color})
+
+(def container-style
+  {:flex 1})

src/quo/components/overlay/view.cljs

@@ -0,0 +1,23 @@
+(ns quo.components.overlay.view
+  (:require
+    [quo.components.overlay.style :as style]
+    [quo.foundations.colors :as colors]
+    [react-native.blur :as blur]
+    [react-native.core :as rn]))
+
+(defn view
+  [{:keys [type]} child]
+  (let [background-color (case type
+                           :shell  colors/neutral-80-opa-80-blur
+                           :drawer colors/neutral-100-opa-70-blur)]
+    [rn/view
+     {:style (style/overlay-background background-color)}
+     (if (= type :shell)
+       [blur/view
+        {:blur-amount 20
+         :blur-type   :transparent
+         :style       style/container-style}
+        child]
+       [rn/view
+        {:style style/container-style}
+        child])]))

src/quo/core.cljs

@@ -100,6 +100,7 @@
     quo.components.numbered-keyboard.keyboard-key.view
     quo.components.numbered-keyboard.numbered-keyboard.view
     quo.components.onboarding.small-option-card.view
+    quo.components.overlay.view
     quo.components.password.tips.view
     quo.components.profile.collectible.view
     quo.components.profile.profile-card.view
@@ -314,6 +315,9 @@
 (def notification quo.components.notifications.notification.view/notification)
 (def toast quo.components.notifications.toast.view/toast)
 
+;;;; Overlay
+(def overlay quo.components.overlay.view/view)
+
 ;;;; Password
 (def tips quo.components.password.tips.view/view)