implemented giggin page

giggin/shadow-cljs.edn

@@ -18,4 +18,4 @@
         :devtools
         {:after-load  giggin.core/main
          :http-root   "public"
-         :http-port   3000}}}}
+         :http-port   3001}}}}

giggin/src/giggin/components/footer.cljs

@@ -0,0 +1,6 @@
+(ns giggin.components.footer)
+
+(defn footer
+  []
+  [:footer
+   [:img {:src "img/giggin-icon.png" :alt "Giggin Logo"}]])

giggin/src/giggin/components/gigs.cljs

@@ -0,0 +1,20 @@
+(ns giggin.components.gigs
+  (:require [giggin.state :as state]
+            [giggin.helpers :refer [format-price]]))
+
+(defn gigs
+  []
+  (let [add-to-order #(swap! state/orders update % inc)]
+    [:main
+     [:div.gigs
+      (for [{:keys [id img title price desc]} (vals @state/gigs)]
+        [:div.gig {:key id}
+         [:img.gig__artwork {:src img :alt title}]
+         [:div.gig__body
+          [:div.gig__title
+           [:div.btn.btn--primary.float--right.tooltip
+            {:data-tooltip "Add to order"
+             :on-click #(add-to-order id)}
+            [:i.icon.icon--plus]] title]
+          [:p.gig__price (format-price price)]
+          [:p.gig__desc desc]]])]]))

giggin/src/giggin/components/header.cljs

@@ -0,0 +1,6 @@
+(ns giggin.components.header)
+
+(defn header
+  []
+  [:header
+   [:img.logo {:src "img/giggin-logo.svg" :alt "Giggin Logo"}]])

giggin/src/giggin/components/orders.cljs

@@ -0,0 +1,51 @@
+(ns giggin.components.orders
+  (:require [giggin.state :as state]
+            [giggin.helpers :refer [format-price]]))
+
+(defn total
+  []
+  (->> @state/orders
+    (map (fn [[id quant]]
+           (* quant (get-in @state/gigs [id :price]))))
+    (reduce +)))
+
+
+
+(defn orders
+  []
+  (let [remove-from-order #(swap! state/orders dissoc %)
+        remove-all-orders #(reset! state/orders {})
+        decrement-order #(swap! state/orders update % dec)]
+    [:aside
+       (if (empty? @state/orders)
+         [:div.empty
+          [:div.title "You don't have any orders"]
+          [:div.subtitle "Click on a + to add an order"]]
+         [:div.order
+            [:div.body
+             (for [[id quant] @state/orders]
+               [:div.item {:key id}
+                [:div.img
+                 [:img {:src (get-in @state/gigs [id :img])
+                        :alt (get-in @state/gigs [id :title])}]
+                 [:div.content
+                  [:p.title (str (get-in @state/gigs [id :title]) " \u00D7 " quant)]]
+                 [:div.action
+                  [:div.price (format-price (* (get-in @state/gigs [id :price]) quant))]
+                  [:button.btn.btn--link.tooltip
+                   {:data-tooltip "Remove"
+                    :on-click
+                          #(cond
+                            (> quant 1) (decrement-order id)
+                            (= quant 1) (remove-from-order id))}
+                   [:i.icon.icon--cross]]]]])]
+            [:div.total
+             [:hr]
+             [:div.item
+              [:div.content "Total"]
+              [:div.action
+               [:div.price (format-price (total))]]
+              [:button.btn.btn--link.tooltip
+               {:data-tooltip "Remove all"
+                :on-click #(remove-all-orders)}
+               [:i.icon.icon--delete]]]]])]))

giggin/src/giggin/core.cljs

@@ -1,9 +1,19 @@
 (ns giggin.core
-  (:require [reagent.core :as r]))
+  (:require [reagent.core :as r]
+            [giggin.components.header :refer [header]]
+            [giggin.components.gigs :refer [gigs]]
+            [giggin.components.orders :refer [orders]]
+            [giggin.components.footer :refer [footer]]))
+
+
 
 (defn app
   []
-  [:div.container])
+  [:div.container
+   [header]
+   [gigs]
+   [orders]
+   [footer]])
 
 (defn ^:export main
   []

giggin/src/giggin/helpers.cljs

@@ -0,0 +1,5 @@
+(ns giggin.helpers)
+
+(defn format-price
+  [cents]
+  (str " $" (/ cents 100)))

giggin/src/giggin/state.cljs

@@ -1,6 +1,8 @@
 (ns giggin.state
   (:require [reagent.core :as r]))
 
+(def orders (r/atom {}))
+
 (def gigs (r/atom {:gig-01 {:id :gig-01
                             :title "Macaron"
                             :artist "Baher Khairy"