diff options
| -rw-r--r-- | src/frontend/tubo/layout/views.cljs | 15 | ||||
| -rw-r--r-- | src/frontend/tubo/stream/views.cljs | 31 |
2 files changed, 18 insertions, 28 deletions
diff --git a/src/frontend/tubo/layout/views.cljs b/src/frontend/tubo/layout/views.cljs index 63e6b84..72988c7 100644 --- a/src/frontend/tubo/layout/views.cljs +++ b/src/frontend/tubo/layout/views.cljs @@ -276,24 +276,27 @@ (defn tabs [tabs] (let [!current (r/atom (and (seq tabs) (nth tabs 0)))] - (fn [tabs & {:keys [on-change]}] + (fn [tabs & {:keys [on-change selected-id]}] [:div (into [:ul.w-full.flex.gap-x-4.justify-center.items-center] (when (seq tabs) (for [[i tab] (map-indexed vector tabs)] - (let [selected? (= (:id tab) (:id @!current))] + (let [selected? (= (:id tab) selected-id)] (when tab [:li.flex-auto.flex.justify-center.items-center.font-semibold.border-b-2 {:class (if selected? "border-neutral-700 dark:border-neutral-100" "!border-transparent") :key i} - [:button.flex-auto.py-4 + [:button.flex.flex-auto.py-4.items-center.gap-3.justify-center {:on-click (when (not selected?) (fn [] (reset! !current tab) (on-change (:id @!current))))} - (if (:label-fn tab) - ((:label-fn tab) (:label tab)) - (:label tab))]])))))]))) + (:left-icon tab) + [:span.hidden.xs:block + (if (:label-fn tab) + ((:label-fn tab) (:label tab)) + (:label tab))] + (:right-icon tab)]])))))]))) diff --git a/src/frontend/tubo/stream/views.cljs b/src/frontend/tubo/stream/views.cljs index 1bbd2df..88d1a30 100644 --- a/src/frontend/tubo/stream/views.cljs +++ b/src/frontend/tubo/stream/views.cljs @@ -135,13 +135,9 @@ [] (let [!active-tab (r/atom :comments)] (fn [] - (let [stream @(rf/subscribe [:stream]) - !player @(rf/subscribe [:main-player]) - page-loading? @(rf/subscribe [:show-page-loading]) - comments-length (-> stream - :comments-page - :comments - count)] + (let [stream @(rf/subscribe [:stream]) + !player @(rf/subscribe [:main-player]) + page-loading? @(rf/subscribe [:show-page-loading])] [:<> (when-not page-loading? [:div.flex.flex-col.justify-center.items-center @@ -151,21 +147,12 @@ [description stream] [:div.mt-10 [layout/tabs - [{:id :comments - :label "Comments" - :label-fn - (fn [label] - [:div.flex.gap-3.items-center.justify-center - [:i.fa-solid.fa-comments] - [:span label] - [:span.bg-neutral-200.dark:bg-neutral-800.rounded.px-2.text-sm - comments-length]])} - {:id :related-items - :label "Related Items" - :label-fn (fn [label] - [:div.flex.gap-3.items-center.justify-center - [:i.fa-solid.fa-table-list] - [:span label]])}] + [{:id :comments + :label "Comments" + :left-icon [:i.fa-solid.fa-comments]} + {:id :related-items + :label "Related Items" + :left-icon [:i.fa-solid.fa-table-list]}] :selected-id @!active-tab :on-change #(reset! !active-tab %)]] (case @!active-tab |