giles
e8bc228c7f
Rename all sexp directories, files, identifiers, and references to sx. artdag/ excluded (separate media processing DSL). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
104 lines
4.7 KiB
Plaintext
104 lines
4.7 KiB
Plaintext
;; Events entry card components (all events / page summary)
|
|
|
|
(defcomp ~events-state-badge (&key cls label)
|
|
(span :class (str "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium " cls) label))
|
|
|
|
(defcomp ~events-entry-title-linked (&key href name)
|
|
(a :href href :class "hover:text-emerald-700"
|
|
(h2 :class "text-lg font-semibold text-stone-900" name)))
|
|
|
|
(defcomp ~events-entry-title-plain (&key name)
|
|
(h2 :class "text-lg font-semibold text-stone-900" name))
|
|
|
|
(defcomp ~events-entry-title-tile-linked (&key href name)
|
|
(a :href href :class "hover:text-emerald-700"
|
|
(h2 :class "text-base font-semibold text-stone-900 line-clamp-2" name)))
|
|
|
|
(defcomp ~events-entry-title-tile-plain (&key name)
|
|
(h2 :class "text-base font-semibold text-stone-900 line-clamp-2" name))
|
|
|
|
(defcomp ~events-entry-page-badge (&key href title)
|
|
(a :href href :class "inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 hover:bg-amber-200" title))
|
|
|
|
(defcomp ~events-entry-cal-badge (&key name)
|
|
(span :class "inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-sky-100 text-sky-700" name))
|
|
|
|
(defcomp ~events-entry-time-linked (&key href date-str)
|
|
(<> (a :href href :class "hover:text-stone-700" date-str) " · "))
|
|
|
|
(defcomp ~events-entry-time-plain (&key date-str)
|
|
(<> (span date-str) " · "))
|
|
|
|
(defcomp ~events-entry-cost (&key cost)
|
|
(div :class "mt-1 text-sm font-medium text-green-600" cost))
|
|
|
|
(defcomp ~events-entry-card (&key title badges time-parts cost widget)
|
|
(article :class "rounded-xl bg-white shadow-sm border border-stone-200 p-4"
|
|
(div :class "flex flex-col sm:flex-row sm:items-start justify-between gap-3"
|
|
(div :class "flex-1 min-w-0"
|
|
title
|
|
(div :class "flex flex-wrap items-center gap-1.5 mt-1" badges)
|
|
(div :class "mt-1 text-sm text-stone-500" time-parts)
|
|
cost)
|
|
widget)))
|
|
|
|
(defcomp ~events-entry-card-tile (&key title badges time cost widget)
|
|
(article :class "rounded-xl bg-white shadow-sm border border-stone-200 overflow-hidden"
|
|
(div :class "p-3"
|
|
title
|
|
(div :class "flex flex-wrap items-center gap-1 mt-1" badges)
|
|
(div :class "mt-1 text-xs text-stone-500" time)
|
|
cost)
|
|
widget))
|
|
|
|
(defcomp ~events-entry-tile-widget-wrapper (&key widget)
|
|
(div :class "border-t border-stone-100 px-3 py-2" widget))
|
|
|
|
(defcomp ~events-entry-widget-wrapper (&key widget)
|
|
(div :class "shrink-0" widget))
|
|
|
|
(defcomp ~events-date-separator (&key date-str)
|
|
(div :class "pt-2 pb-1"
|
|
(h3 :class "text-sm font-semibold text-stone-500 uppercase tracking-wide" date-str)))
|
|
|
|
(defcomp ~events-sentinel (&key page next-url)
|
|
(div :id (str "sentinel-" page) :class "h-4 opacity-0 pointer-events-none"
|
|
:sx-get next-url :sx-trigger "intersect once delay:250ms" :sx-swap "outerHTML"
|
|
:role "status" :aria-hidden "true"
|
|
(div :class "text-center text-xs text-stone-400" "loading...")))
|
|
|
|
(defcomp ~events-list-svg ()
|
|
(svg :xmlns "http://www.w3.org/2000/svg" :class "h-5 w-5" :fill "none"
|
|
:viewBox "0 0 24 24" :stroke "currentColor" :stroke-width "2"
|
|
(path :stroke-linecap "round" :stroke-linejoin "round" :d "M4 6h16M4 12h16M4 18h16")))
|
|
|
|
(defcomp ~events-tile-svg ()
|
|
(svg :xmlns "http://www.w3.org/2000/svg" :class "h-5 w-5" :fill "none"
|
|
:viewBox "0 0 24 24" :stroke "currentColor" :stroke-width "2"
|
|
(path :stroke-linecap "round" :stroke-linejoin "round"
|
|
:d "M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z")))
|
|
|
|
(defcomp ~events-view-toggle (&key list-href tile-href hx-select list-active tile-active list-svg tile-svg)
|
|
(div :class "hidden md:flex justify-end px-3 pt-3 gap-1"
|
|
(a :href list-href :sx-get list-href :sx-target "#main-panel" :sx-select hx-select
|
|
:sx-swap "outerHTML" :sx-push-url "true"
|
|
:class (str "p-1.5 rounded " list-active) :title "List view"
|
|
:_ "on click js localStorage.removeItem('events_view') end"
|
|
list-svg)
|
|
(a :href tile-href :sx-get tile-href :sx-target "#main-panel" :sx-select hx-select
|
|
:sx-swap "outerHTML" :sx-push-url "true"
|
|
:class (str "p-1.5 rounded " tile-active) :title "Tile view"
|
|
:_ "on click js localStorage.setItem('events_view','tile') end"
|
|
tile-svg)))
|
|
|
|
(defcomp ~events-grid (&key grid-cls cards)
|
|
(div :class grid-cls cards))
|
|
|
|
(defcomp ~events-empty ()
|
|
(div :class "px-3 py-12 text-center text-stone-400"
|
|
(i :class "fa fa-calendar-xmark text-4xl mb-3" :aria-hidden "true")
|
|
(p :class "text-lg" "No upcoming events")))
|
|
|
|
(defcomp ~events-main-panel-body (&key toggle body)
|
|
(<> toggle body (div :class "pb-8")))
|