feat(frontend): add generic input components

2 files changed, 35 insertions, 14 deletions

diff --git a/src/frontend/tubo/components/layout.cljs b/src/frontend/tubo/components/layout.cljs
index 92c5ac4..2e0ab40 100644
--- a/src/frontend/tubo/components/layout.cljs
+++ b/src/frontend/tubo/components/layout.cljs
@@ -74,6 +74,38 @@
      [:i.text-neutral-500.dark:text-white.text-sm
       {:class right-icon}])])
 
+(defn generic-input [label & children]
+  [:div.w-full.flex.justify-between.items-center.py-2.gap-x-4
+   [:label label]
+   (map-indexed #(with-meta %2 {:key %1}) children)])
+
+(defn text-input
+  [label key value on-change placeholder]
+  [generic-input label
+   [:input.text-black
+    {:type          "text"
+     :default-value value
+     :on-change     on-change
+     :placeholder   placeholder}]])
+
+(defn boolean-input
+  [label key value on-change]
+  [generic-input label
+   [:input
+    {:type      "checkbox"
+     :checked   value
+     :value     value
+     :on-change on-change}]])
+
+(defn select-input
+  [label key value options on-change]
+  [generic-input label
+   [:select.focus:ring-transparent.bg-transparent.font-bold.font-nunito
+    {:value     value
+     :on-change on-change}
+    (for [[i option] (map-indexed vector options)]
+      ^{:key i} [:option.dark:bg-neutral-900.border-none {:value option :key i} option])]])
+
 (defn accordeon
   [{:keys [label on-open open? left-icon right-button]} & content]
   [:div.py-4
diff --git a/src/frontend/tubo/views/settings.cljs b/src/frontend/tubo/views/settings.cljs
index 6b8027c..c02e982 100644
--- a/src/frontend/tubo/views/settings.cljs
+++ b/src/frontend/tubo/views/settings.cljs
@@ -6,23 +6,12 @@
 
 (defn boolean-input
   [label key value]
-  [:div.w-full.flex.justify-between.items-center.py-2
-   [:label label]
-   [:input
-    {:type      "checkbox"
-     :checked   value
-     :value     value
-     :on-change #(rf/dispatch [::events/change-setting key (not value)])}]])
+  [layout/boolean-input label key value #(rf/dispatch [::events/change-setting key (not value)])])
 
 (defn select-input
   [label key value options on-change]
-  [:div.w-full.flex.justify-between.items-center.py-2
-   [:label label]
-   [:select.focus:ring-transparent.bg-transparent.font-bold.font-nunito
-    {:value     value
-     :on-change (or on-change #(rf/dispatch [::events/change-setting key (.. % -target -value)]))}
-    (for [[i option] (map-indexed vector options)]
-      [:option.dark:bg-neutral-900.border-none {:value option :key i} option])]])
+  [layout/select-input label key value options
+   (or on-change #(rf/dispatch [::events/change-setting key (.. % -target -value)]))])
 
 (defn settings-page []
   (let [{:keys [theme themes show-comments show-related