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>
67 lines
4.0 KiB
Plaintext
67 lines
4.0 KiB
Plaintext
;; Cart item components
|
|
|
|
(defcomp ~cart-item-img (&key src alt)
|
|
(img :src src :alt alt :class "w-24 h-24 sm:w-32 sm:h-28 object-cover rounded-xl border border-stone-100" :loading "lazy"))
|
|
|
|
(defcomp ~cart-item-no-img ()
|
|
(div :class "w-24 h-24 sm:w-32 sm:h-28 rounded-xl border border-dashed border-stone-300 flex items-center justify-center text-xs text-stone-400"
|
|
"No image"))
|
|
|
|
(defcomp ~cart-item-price (&key text)
|
|
(p :class "text-sm sm:text-base font-semibold text-stone-900" text))
|
|
|
|
(defcomp ~cart-item-price-was (&key text)
|
|
(p :class "text-xs text-stone-400 line-through" text))
|
|
|
|
(defcomp ~cart-item-no-price ()
|
|
(p :class "text-xs text-stone-500" "No price"))
|
|
|
|
(defcomp ~cart-item-deleted ()
|
|
(p :class "mt-2 inline-flex items-center gap-1 text-[0.65rem] sm:text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 rounded-full px-2 py-0.5"
|
|
(i :class "fa-solid fa-triangle-exclamation text-[0.6rem]" :aria-hidden "true")
|
|
" This item is no longer available or price has changed"))
|
|
|
|
(defcomp ~cart-item-brand (&key brand)
|
|
(p :class "mt-0.5 text-[0.7rem] sm:text-xs text-stone-500" brand))
|
|
|
|
(defcomp ~cart-item-line-total (&key text)
|
|
(p :class "text-sm sm:text-base font-semibold text-stone-900" text))
|
|
|
|
(defcomp ~cart-item (&key id img prod-url title brand deleted price qty-url csrf minus qty plus line-total)
|
|
(article :id id :class "flex flex-col sm:flex-row gap-3 sm:gap-4 rounded-2xl bg-white shadow-sm border border-stone-200 p-3 sm:p-4 md:p-5"
|
|
(div :class "w-full sm:w-32 shrink-0 flex justify-center sm:block" (when img img))
|
|
(div :class "flex-1 min-w-0"
|
|
(div :class "flex flex-col sm:flex-row sm:items-start justify-between gap-2 sm:gap-3"
|
|
(div :class "min-w-0"
|
|
(h2 :class "text-sm sm:text-base md:text-lg font-semibold text-stone-900"
|
|
(a :href prod-url :class "hover:text-emerald-700" title))
|
|
(when brand brand) (when deleted deleted))
|
|
(div :class "text-left sm:text-right" (when price price)))
|
|
(div :class "mt-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-4"
|
|
(div :class "flex items-center gap-2 text-xs sm:text-sm text-stone-700"
|
|
(span :class "text-[0.65rem] sm:text-xs uppercase tracking-wide text-stone-500" "Quantity")
|
|
(form :action qty-url :method "post" :sx-post qty-url :sx-swap "none"
|
|
(input :type "hidden" :name "csrf_token" :value csrf)
|
|
(input :type "hidden" :name "count" :value minus)
|
|
(button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "-"))
|
|
(span :class "inline-flex items-center justify-center px-2 py-1 rounded-full bg-stone-100 text-[0.7rem] sm:text-xs font-medium" qty)
|
|
(form :action qty-url :method "post" :sx-post qty-url :sx-swap "none"
|
|
(input :type "hidden" :name "csrf_token" :value csrf)
|
|
(input :type "hidden" :name "count" :value plus)
|
|
(button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "+")))
|
|
(div :class "flex items-center justify-between sm:justify-end gap-3" (when line-total line-total))))))
|
|
|
|
(defcomp ~cart-page-empty ()
|
|
(div :class "max-w-full px-3 py-3 space-y-3"
|
|
(div :id "cart"
|
|
(div :class "rounded-2xl border border-dashed border-stone-300 bg-white/80 p-6 sm:p-8 text-center"
|
|
(div :class "inline-flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-full bg-stone-100 mb-3"
|
|
(i :class "fa fa-shopping-cart text-stone-500 text-sm sm:text-base" :aria-hidden "true"))
|
|
(p :class "text-base sm:text-lg font-medium text-stone-800" "Your cart is empty")))))
|
|
|
|
(defcomp ~cart-page-panel (&key items cal tickets summary)
|
|
(div :class "max-w-full px-3 py-3 space-y-3"
|
|
(div :id "cart"
|
|
(div (section :class "space-y-3 sm:space-y-4" items cal tickets)
|
|
summary))))
|