giles
ea18a402d6
highlight.py handles syntax coloring with Tailwind classes — Prism classes were conflicting and are not needed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
159 lines
6.0 KiB
Plaintext
159 lines
6.0 KiB
Plaintext
;; SX docs — example and demo components
|
|
|
|
(defcomp ~example-card (&key title description &rest children)
|
|
(div :class "border border-stone-200 rounded-lg overflow-hidden"
|
|
(div :class "bg-stone-50 px-4 py-3 border-b border-stone-200"
|
|
(h3 :class "font-semibold text-stone-800" title)
|
|
(when description
|
|
(p :class "text-sm text-stone-500 mt-1" description)))
|
|
(div :class "p-4" children)))
|
|
|
|
(defcomp ~example-demo (&key &rest children)
|
|
(div :class "border border-dashed border-stone-300 rounded p-4 bg-white" children))
|
|
|
|
(defcomp ~example-source (&key code)
|
|
(div :class "bg-stone-50 border border-stone-200 rounded p-4 mt-3 overflow-x-auto"
|
|
(pre :class "text-sm" (code code))))
|
|
|
|
;; --- Click to load demo ---
|
|
|
|
(defcomp ~click-to-load-demo ()
|
|
(div :class "space-y-4"
|
|
(div :id "click-result" :class "p-4 rounded bg-stone-50 text-stone-500 text-center"
|
|
"Click the button to load content.")
|
|
(button
|
|
:sx-get "/examples/api/click"
|
|
:sx-target "#click-result"
|
|
:sx-swap "innerHTML"
|
|
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors"
|
|
"Load content")))
|
|
|
|
(defcomp ~click-result ()
|
|
(div :class "space-y-2"
|
|
(p :class "text-stone-800 font-medium" "Content loaded!")
|
|
(p :class "text-stone-500 text-sm" "This was fetched from the server via sx-get and swapped into the target div.")))
|
|
|
|
;; --- Form submission demo ---
|
|
|
|
(defcomp ~form-demo ()
|
|
(div :class "space-y-4"
|
|
(form
|
|
:sx-post "/examples/api/form"
|
|
:sx-target "#form-result"
|
|
:sx-swap "innerHTML"
|
|
:class "space-y-3"
|
|
(div
|
|
(label :class "block text-sm font-medium text-stone-700 mb-1" "Name")
|
|
(input :type "text" :name "name" :placeholder "Enter a name"
|
|
:class "w-full px-3 py-2 border border-stone-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-violet-500"))
|
|
(button :type "submit"
|
|
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
|
|
"Submit"))
|
|
(div :id "form-result" :class "p-3 rounded bg-stone-50 text-stone-500 text-sm text-center"
|
|
"Submit the form to see the result.")))
|
|
|
|
(defcomp ~form-result (&key name)
|
|
(div :class "text-stone-800"
|
|
(p (str "Hello, " (if (empty? name) "stranger" name) "!"))
|
|
(p :class "text-sm text-stone-500 mt-1" "Submitted via sx-post. The form data was sent as a POST request.")))
|
|
|
|
;; --- Polling demo ---
|
|
|
|
(defcomp ~polling-demo ()
|
|
(div :class "space-y-4"
|
|
(div :id "poll-target"
|
|
:sx-get "/examples/api/poll"
|
|
:sx-trigger "load, every 2s"
|
|
:sx-swap "innerHTML"
|
|
:class "p-4 rounded border border-stone-200 bg-white text-center font-mono"
|
|
"Loading...")))
|
|
|
|
(defcomp ~poll-result (&key time count)
|
|
(div
|
|
(p :class "text-stone-800 font-medium" (str "Server time: " time))
|
|
(p :class "text-stone-500 text-sm mt-1" (str "Poll count: " count))
|
|
(div :class "mt-2 flex justify-center"
|
|
(div :class "flex gap-1"
|
|
(map (fn (i)
|
|
(div :class (str "w-2 h-2 rounded-full "
|
|
(if (<= i count) "bg-violet-500" "bg-stone-200"))))
|
|
(list 1 2 3 4 5 6 7 8 9 10))))))
|
|
|
|
;; --- Delete row demo ---
|
|
|
|
(defcomp ~delete-demo (&key items)
|
|
(div
|
|
(table :class "w-full text-left text-sm"
|
|
(thead
|
|
(tr :class "border-b border-stone-200"
|
|
(th :class "px-3 py-2 font-medium text-stone-600" "Item")
|
|
(th :class "px-3 py-2 font-medium text-stone-600 w-20" "")))
|
|
(tbody :id "delete-rows"
|
|
(map (fn (item)
|
|
(~delete-row :id (nth 0 item) :name (nth 1 item)))
|
|
items)))))
|
|
|
|
(defcomp ~delete-row (&key id name)
|
|
(tr :id (str "row-" id) :class "border-b border-stone-100 transition-all"
|
|
(td :class "px-3 py-2 text-stone-700" name)
|
|
(td :class "px-3 py-2"
|
|
(button
|
|
:sx-delete (str "/examples/api/delete/" id)
|
|
:sx-target (str "#row-" id)
|
|
:sx-swap "outerHTML"
|
|
:sx-confirm "Delete this item?"
|
|
:class "text-rose-500 hover:text-rose-700 text-sm"
|
|
"delete"))))
|
|
|
|
;; --- Inline edit demo ---
|
|
|
|
(defcomp ~inline-edit-demo ()
|
|
(div :id "edit-target" :class "space-y-3"
|
|
(~inline-view :value "Click edit to change this text")))
|
|
|
|
(defcomp ~inline-view (&key value)
|
|
(div :class "flex items-center justify-between p-3 rounded border border-stone-200"
|
|
(span :class "text-stone-800" value)
|
|
(button
|
|
:sx-get (str "/examples/api/edit?value=" value)
|
|
:sx-target "#edit-target"
|
|
:sx-swap "innerHTML"
|
|
:class "text-sm text-violet-600 hover:text-violet-800"
|
|
"edit")))
|
|
|
|
(defcomp ~inline-edit-form (&key value)
|
|
(form
|
|
:sx-post "/examples/api/edit"
|
|
:sx-target "#edit-target"
|
|
:sx-swap "innerHTML"
|
|
:class "flex items-center gap-2 p-3 rounded border border-violet-300 bg-violet-50"
|
|
(input :type "text" :name "value" :value value
|
|
:class "flex-1 px-3 py-1.5 border border-stone-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-violet-500")
|
|
(button :type "submit"
|
|
:class "px-3 py-1.5 bg-violet-600 text-white rounded text-sm hover:bg-violet-700"
|
|
"save")
|
|
(button :type "button"
|
|
:sx-get (str "/examples/api/edit/cancel?value=" value)
|
|
:sx-target "#edit-target"
|
|
:sx-swap "innerHTML"
|
|
:class "px-3 py-1.5 bg-stone-200 text-stone-700 rounded text-sm hover:bg-stone-300"
|
|
"cancel")))
|
|
|
|
;; --- OOB swap demo ---
|
|
|
|
(defcomp ~oob-demo ()
|
|
(div :class "space-y-4"
|
|
(div :class "grid grid-cols-2 gap-4"
|
|
(div :id "oob-box-a" :class "p-4 rounded border border-stone-200 bg-white text-center"
|
|
(p :class "text-stone-500" "Box A")
|
|
(p :class "text-sm text-stone-400" "Waiting..."))
|
|
(div :id "oob-box-b" :class "p-4 rounded border border-stone-200 bg-white text-center"
|
|
(p :class "text-stone-500" "Box B")
|
|
(p :class "text-sm text-stone-400" "Waiting...")))
|
|
(button
|
|
:sx-get "/examples/api/oob"
|
|
:sx-target "#oob-box-a"
|
|
:sx-swap "innerHTML"
|
|
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
|
|
"Update both boxes")))
|