feat(frontend): add common layout components for views

1 files changed, 20 insertions, 28 deletions

diff --git a/src/frontend/tubo/views/channel.cljs b/src/frontend/tubo/views/channel.cljs
index fd7965c..643acaf 100644
--- a/src/frontend/tubo/views/channel.cljs
+++ b/src/frontend/tubo/views/channel.cljs
@@ -2,8 +2,8 @@
   (:require
    [re-frame.core :as rf]
    [tubo.components.items :as items]
+   [tubo.components.layout :as layout]
    [tubo.components.loading :as loading]
-   [tubo.components.navigation :as navigation]
    [tubo.events :as events]))
 
 (defn channel
@@ -17,30 +17,22 @@
         scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])]
     (when scrolled-to-bottom?
       (rf/dispatch [::events/channel-pagination url next-page-url]))
-    [:div.flex.flex-col.items-center.px-5.py-2.flex-auto
-     (if page-loading?
-       [loading/loading-icon service-color "text-5xl"]
-       [:div.flex.flex-col.flex-auto {:class "ml:w-4/5 xl:w-3/5"}
-        [navigation/back-button service-color]
-        (when banner
-          [:div.flex.justify-center
-           [:img {:src banner}]])
-        [:div.flex.items-center.justify-between
-         [:div.flex.items-center.my-4.mx-2
-          (when avatar
-            [:div.relative.w-16.h-16
-             [:img.rounded-full.object-cover.max-w-full.min-h-full {:src avatar :alt name}]])
-          [:div.m-4
-           [:h1.text-xl name]
-           (when subscriber-count
-             [:div.flex.my-2.items-center
-              [:i.fa-solid.fa-users.text-xs]
-              [:span.mx-2 (.toLocaleString subscriber-count)]])]]
-         [:div.whitespace-nowrap.ml-4
-          [:button
-           {:on-click #(rf/dispatch [::events/enqueue-related-streams related-streams service-color])}
-           [:i.fa-solid.fa-headphones.mx-3]
-           [:span.text-neutral-600.dark:text-neutral-300 "Background"]]]]
-        [:div.my-2
-         [:p description]]
-        [items/related-streams related-streams next-page-url]])]))
+    [layout/content-container
+     (when banner
+       [:div.flex.justify-center
+        [:img.min-w-full {:src banner}]])
+     [:div.flex.items-center.justify-between
+      [:div.flex.items-center.my-4.mx-2
+       [layout/uploader-avatar avatar name]
+       [:div.m-4
+        [:h1.text-xl name]
+        (when subscriber-count
+          [:div.flex.my-2.items-center
+           [:i.fa-solid.fa-users.text-xs]
+           [:span.mx-2 (.toLocaleString subscriber-count)]])]]
+      [layout/primary-button "Enqueue"
+       #(rf/dispatch [::events/enqueue-related-streams related-streams service-color])
+       "fa-solid fa-headphones"]]
+     [:div.my-2
+      [:p description]]
+     [items/related-streams related-streams next-page-url]]))