feat(frontend): Modularize related streams and add responsive styles

2 files changed, 22 insertions, 2 deletions

diff --git a/src/frontend/tau/components/items.cljs b/src/frontend/tau/components/items.cljs
index 0a8bad6..fdff1ab 100644
--- a/src/frontend/tau/components/items.cljs
+++ b/src/frontend/tau/components/items.cljs
@@ -1,6 +1,8 @@
 (ns tau.components.items
   (:require
+   [re-frame.core :as rf]
    [reitit.frontend.easy :as rfe]
+   [tau.components.loading :as loading]
    [tau.util :as util]
    ["timeago.js" :as timeago]))
 
@@ -78,3 +80,21 @@
      [:div.flex.items-center
       [:i.fa-solid.fa-video.text-xs]
       [:p.mx-2 stream-count]]]]])
+
+(defn related-streams
+  [related-streams next-page-url]
+  (let [service-color @(rf/subscribe [:service-color])
+        pagination-loading? @(rf/subscribe [:show-pagination-loading])]
+    [:div.flex.flex-col.justify-center.items-center.flex-auto
+     (if (empty? related-streams)
+       [:div
+        [:p "No available streams"]]
+       [:div.flex.justify-center.flex-wrap
+        (for [[i item] (map-indexed vector related-streams)
+              :let [keyed-item (assoc item :key i)]]
+          (case (:type item)
+            "stream" [stream-item keyed-item]
+            "channel" [channel-item keyed-item]
+            "playlist" [playlist-item keyed-item]))])
+     (when-not (empty? next-page-url)
+       [loading/items-pagination-loading-icon service-color pagination-loading?])]))
diff --git a/src/frontend/tau/components/navigation.cljs b/src/frontend/tau/components/navigation.cljs
index c8f0b5a..ba38ea4 100644
--- a/src/frontend/tau/components/navigation.cljs
+++ b/src/frontend/tau/components/navigation.cljs
@@ -4,8 +4,8 @@
    [tau.events :as events]))
 
 (defn back-button [service-color]
-  [:div.flex {:class "w-4/5"}
-   [:button.p-2
+  [:div.flex.items-center {:class "w-4/5"}
+   [:button.py-4
     {:on-click #(rf/dispatch [::events/history-back])}
     [:i.fa-solid.fa-chevron-left
      {:style {:color service-color}}]