/
main.cljs
84 lines (80 loc) · 3.54 KB
/
main.cljs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
(ns quo2.screens.main
(:require [quo.react-native :as rn]
[quo.theme :as theme]
[quo.design-system.colors :as colors]
[re-frame.core :as re-frame]
[quo2.screens.button :as button]
[quo2.screens.text :as text]
[quo2.screens.tabs :as tabs]
[quo2.screens.status-tags :as status-tags]
[quo2.screens.counter :as counter]
[quo2.screens.segmented :as segmented]
[quo2.screens.info-message :as info-message]
[quo2.screens.information-box :as information-box]
[quo.components.safe-area :as safe-area]
[quo.core :as quo]))
(def screens [{:name :quo2-texts
:insets {:top false}
:component text/preview-text}
{:name :quo2-button
:insets {:top false}
:component button/preview-button}
{:name :quo2-status-tags
:insets {:top false}
:component status-tags/preview-status-tags}
{:name :quo2-tabs
:insets {:top false}
:component tabs/preview-tabs}
{:name :quo2-segmented
:insets {:top false}
:component segmented/preview-segmented}
{:name :quo2-counter
:insets {:top false}
:component counter/preview-counter}
{:name :info-message
:insets {:top false}
:component info-message/preview-info-message}
{:name :information-box
:insets {:top false}
:component information-box/preview-information-box}])
(defn theme-switcher []
[rn/view {:style {:flex-direction :row
:margin-vertical 8
:border-radius 4
:background-color (:ui-01 @colors/theme)
:border-width 1
:border-color (:ui-02 @colors/theme)}}
[rn/touchable-opacity {:style {:padding 8
:flex 1
:justify-content :center
:align-items :center}
:on-press #(theme/set-theme :light)}
[quo/text "Set light theme"]]
[rn/view {:width 1
:margin-vertical 4
:background-color (:ui-02 @colors/theme)}]
[rn/touchable-opacity {:style {:padding 8
:flex 1
:justify-content :center
:align-items :center}
:on-press #(theme/set-theme :dark)}
[quo/text "Set dark theme"]]])
(defn main-screen []
(fn []
[safe-area/consumer
(fn [insets]
[rn/scroll-view {:flex 1
:padding-top (:top insets)
:padding-bottom 8
:padding-horizontal 16
:background-color (:ui-background @colors/theme)}
[theme-switcher]
[rn/view
(for [{:keys [name]} screens]
^{:key name}
[rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to name])}
[rn/view {:style {:padding-vertical 8}}
[quo/text (str "Preview " name)]]])]])]))
(def main-screens [{:name :quo2-preview
:insets {:top false}
:component main-screen}])