Channel avatar component (#13658)

src/quo2/components/avatars/channel_avatar.cljs

@@ -0,0 +1,45 @@
+(ns quo2.components.avatars.channel-avatar
+  (:require [quo2.foundations.colors :as colors]
+            [quo.react-native :as rn]
+            [quo2.components.icon :as icons]
+            [quo2.components.markdown.text :as text]
+            [quo.theme :as theme]))
+
+(defn channel-avatar [{:keys [big? lock-status emoji-background-color emoji]}]
+  (let [locked?      (= :locked lock-status)
+        lock-exists? (not= :none lock-status)
+        dark?        (theme/dark?)]
+    [rn/view {:style {:width            (if big? 32 24)
+                      :height           (if big? 32 24)
+                      :border-radius    (if big? 32 24)
+                      :justify-content  :center
+                      :align-items      :center
+                      :background-color emoji-background-color}}
+     [rn/view {:style {:display         :flex
+                       :justify-content :center
+                       :align-items     :center}}
+      [text/text {:size (if big?
+                          :paragraph-1
+                          :label)} emoji]
+      (when lock-exists?
+        [rn/view {:style {:position         :absolute
+                          :left             (if big?
+                                              13
+                                              5)
+                          :top              (if big?
+                                              14
+                                              5)
+                          :background-color (if dark?
+                                              colors/neutral-90
+                                              colors/white)
+                          :border-radius    15
+                          :padding          2}}
+         [icons/icon (if locked?
+                       :main-icons/locked
+                       :main-icons/unlocked)
+          {:color           (if dark?
+                              colors/neutral-40
+                              colors/neutral-50)
+           :container-style {:width  16
+                             :height 16}
+           :size            12}]])]]))

src/quo2/screens/avatars/channel_avatar.cljs

@@ -0,0 +1,47 @@
+(ns quo2.screens.avatars.channel-avatar
+  (:require [reagent.core :as reagent]
+            [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.avatars.channel-avatar :as quo2]))
+
+(def descriptor [{:label "Big?"
+                  :key   :big?
+                  :type  :boolean}
+                 {:label "Avatar color"
+                  :key   :emoji-background-color
+                  :type  :text}
+                 {:label "Avatar color"
+                  :key   :emoji
+                  :type  :text}
+                 {:label   "Lock status"
+                  :key     :lock-status
+                  :type    :select
+                  :options [{:key   :unlocked
+                             :value "Unlocked"}
+                            {:key   :locked
+                             :value "Locked"}]}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:big?                   true
+                             :lock-status            :none
+                             :emoji                  "🍑"
+                             :emoji-background-color :gray})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [rn/view {:flex 1}
+        [preview/customizer state descriptor]]
+       [rn/view {:padding-vertical 60
+                 :flex-direction   :row
+                 :justify-content  :center}
+        [quo2/channel-avatar @state]]])))
+
+(defn preview-channel-avatar []
+  [rn/view {:background-color (colors/theme-colors colors/white
+                                                   colors/neutral-90)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/quo2/screens/main.cljs

@@ -29,6 +29,7 @@
             [quo2.screens.wallet.token-overview :as token-overview]
             [quo2.screens.list-items.preview-lists :as preview-lists]
             [quo2.screens.info.lowest-price :as lowest-price]
+            [quo2.screens.avatars.channel-avatar :as channel-avatar]
             [re-frame.core :as re-frame]))
 
 (def screens-categories
@@ -43,7 +44,10 @@
              :component user-avatar/preview-user-avatar}
             {:name      :wallet-user-avatar
              :insets    {:top false}
-             :component wallet-user-avatar/preview-wallet-user-avatar}]
+             :component wallet-user-avatar/preview-wallet-user-avatar}
+            {:name      :channel-avatar
+             :insets    {:top false}
+             :component channel-avatar/preview-channel-avatar}]
    :buttons [{:name      :button
               :insets    {:top false}
               :component button/preview-button}]