main.cljs

(ns daggerml.main
  (:require
    [daggerml.ui    :as u :refer [BODY BUTTON DIV H1 HR IMG P SHADOW-ROOT SLOT
                                  SPAN STYLE deftag]]
    [daggerml.cells :as c :refer [cell cell= watch=]]))

(deftag FLAT-BUTTON
  [[] [^:default slot1] _]
  (SHADOW-ROOT
    (STYLE "@import 'css/main.css';:host{display:block;}")
    (BUTTON {:class "py-2 px-4 drop-shadow-xl ring-offset-2 text-base text-white
                     bg-purple-600 hover:bg-purple-700 active:bg-purple-400
                     focus:outline-none focus:bg-purple-700 focus:ring-2
                     focus:ring-purple-600 focus:ring-opacity-50 w-full"}
      (slot1))))

(deftag FLAT-CARD-IMG
  [[^:attr src ^:attr slot] [] _]
  (reset! slot "img-slot")
  (SHADOW-ROOT
    (STYLE "@import 'css/main.css';:host{display:block;}")
    (IMG {:class "rounded" :src src})))

(deftag FLAT-CARD-TITLE
  [[^:attr slot] [^:default text-slot] _]
  (reset! slot "title-slot")
  (SHADOW-ROOT
    (STYLE "@import 'css/main.css';:host{display:block;}")
    (text-slot)))

(deftag FLAT-CARD-BODY
  [[^:attr slot] [^:default text-slot] _]
  (reset! slot "text-slot")
  (SHADOW-ROOT
    (STYLE "@import 'css/main.css';:host{display:block;}")
    (text-slot)))

(deftag FLAT-CARD
  "My foo-bar custom element."
  [[^:attr foo ^:attr bar baz] [img-slot title-slot text-slot] connected]
  (let [colors (cell (cycle ["red" "blue" "green"]))
        color  (cell= (first @colors))]
    (SHADOW-ROOT
      (STYLE "@import 'css/main.css';:host{display:block;}")
      (DIV {:class "w-full p-4 filter drop-shadow bg-white rounded"}
        (DIV {:class "flex gap-4"}
          (DIV {:class "w-1/3"}
            (img-slot))
          (DIV {:class "w-full"}
            (H1 {:class "font-semibold text-xl"}
              (title-slot))
            (DIV {:class "h-full pb-4 flex flex-col justify-around"}
              (HR)
              (DIV {:class "text-xs text-justify text-gray-600"}
                (text-slot)))))
        (DIV {:class "pt-4 flex justify-end gap-4"}
          (FLAT-BUTTON {:class "flex-1" :click #(swap! colors rest)} "CANCEL")
          (FLAT-BUTTON {:class "flex-1" :click #(swap! colors rest)} "CHANGE COLOR"))))))

(defn -main
  []
  (BODY {:class "bg-gray-100"}
    (DIV {:class "w-full h-screen flex justify-center items-center"}
      (FLAT-CARD {:class "max-w-lg flex-auto"}
        (FLAT-CARD-IMG {:src "img/teeth2.jpg"})
        (FLAT-CARD-TITLE "Baby Teeth")
        (FLAT-CARD-BODY
          (P "Phasellus eget interdum dolor, eu laoreet ultrices. Morbi
              venenatis tortor a elit molestie, sit amet tincidunt."))))))