feat: Add initial frontend views

1 files changed, 38 insertions, 0 deletions

diff --git a/src/frontend/tau/views/search.cljs b/src/frontend/tau/views/search.cljs
new file mode 100644
index 0000000..64bddf3
--- /dev/null
+++ b/src/frontend/tau/views/search.cljs
@@ -0,0 +1,38 @@
+(ns tau.views.search
+  (:require
+   [re-frame.core :as rf]
+   [reitit.frontend.easy :as rfe]))
+
+(defn search-result
+  [title author url thumbnail id]
+  [:div.w-56.h-64.my-2 {:key id}
+   [:div.p-5.border.rounded.border-slate-900.m-2.bg-slate-600.flex.flex-col.max-w-full.min-h-full.max-h-full
+    [:a.overflow-hidden {:href (rfe/href :tau.routes/stream {} {:url url}) :title title}
+     [:div.flex.justify-center.min-w-full.py-3.box-border
+      [:div.h-28.min-w-full.flex.justify-center
+       [:img.rounded.object-cover.max-h-full {:src thumbnail}]]]
+     [:div.overflow-hidden
+      [:h1.text-gray-300.font-bold author]
+      [:h1 title]]]]])
+
+(defn search
+  [m]
+  (let [search-results (rf/subscribe [:search-results])
+        services (rf/subscribe [:services])
+        service-id (rf/subscribe [:service-id])]
+    [:div.text-gray-300.text-center.py-5.relative
+     [:h2 (str "Showing search results for: \"" (-> m :query-params :q) "\"")]
+     [:h1 (str "Number of search results: " (count (:items @search-results)))]
+     ;; TODO: Create loadable component that wraps other components that need to fetch from API
+     ;; or use a :loading key to show a spinner component instead
+     (if (empty? @search-results)
+       [:p "Loading"]
+       [:div.flex.justify-center.align-center.flex-wrap
+        (for [[i result] (map-indexed vector (:items @search-results))]
+          ;; TODO: Add a component per result type
+          [search-result
+           (:name result)
+           (:upload-author result)
+           (:url result)
+           (:thumbnail-url result)
+           i])])]))