diff options
| -rw-r--r-- | src/frontend/tubo/components/layout.cljs | 32 | ||||
| -rw-r--r-- | src/frontend/tubo/views/settings.cljs | 17 |
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 |