giles
e81d77437e
Python sxc/pages/ functions no longer build nested sx_call chains or reference leaf component names. Instead they extract data (URLs, prices, CSRF, cart state) and call a single top-level composition defcomp with pure data values. The .sx defcomps handle all component-to-component wiring, iteration (map), and conditional rendering. New .sx composition defcomps: - headers.sx: ~market-header-from-data, ~market-desktop-nav-from-data, ~market-product-header-from-data, ~market-product-admin-header-from-data - prices.sx: ~market-prices-header-from-data, ~market-card-price-from-data - navigation.sx: ~market-mobile-nav-from-data - cards.sx: ~market-product-cards-content, ~market-card-from-data, ~market-cards-content, ~market-landing-from-data - detail.sx: ~market-product-detail-from-data, ~market-detail-gallery-from-data, ~market-detail-info-from-data - meta.sx: ~market-product-meta-from-data - filters.sx: ~market-desktop-filter-from-data, ~market-mobile-chips-from-data, ~market-mobile-filter-content-from-data, plus 6 sub-composition defcomps Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
98 lines
4.8 KiB
Plaintext
98 lines
4.8 KiB
Plaintext
;; Market navigation components
|
|
|
|
(defcomp ~market-category-link (&key href hx-select active select-colours label)
|
|
(div :class "relative nav-group"
|
|
(a :href href :sx-get href :sx-target "#main-panel"
|
|
:sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
|
|
:aria-selected (if active "true" "false")
|
|
:class (str "block px-2 py-1 rounded text-center whitespace-normal break-words leading-snug bg-stone-200 text-black " select-colours)
|
|
label)))
|
|
|
|
(defcomp ~market-desktop-category-nav (&key links admin)
|
|
(nav :class "hidden md:flex gap-4 text-sm ml-2 w-full justify-end items-center"
|
|
links admin))
|
|
|
|
(defcomp ~market-mobile-nav-wrapper (&key items)
|
|
(div :class "px-4 py-2" (div :class "divide-y" items)))
|
|
|
|
(defcomp ~market-mobile-all-link (&key href hx-select active select-colours)
|
|
(a :role "option" :href href :sx-get href :sx-target "#main-panel"
|
|
:sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
|
|
:aria-selected (if active "true" "false")
|
|
:class (str "block rounded-lg px-3 py-3 text-base hover:bg-stone-50 " select-colours)
|
|
(div :class "prose prose-stone max-w-none" "All")))
|
|
|
|
(defcomp ~market-mobile-chevron ()
|
|
(svg :class "w-4 h-4 shrink-0 transition-transform group-open/cat:rotate-180"
|
|
:viewBox "0 0 20 20" :fill "currentColor"
|
|
(path :fill-rule "evenodd" :clip-rule "evenodd"
|
|
:d "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z")))
|
|
|
|
(defcomp ~market-mobile-cat-summary (&key bg-cls href hx-select select-colours cat-name count-label count-str chevron)
|
|
(summary :class (str "flex items-center justify-between cursor-pointer select-none block rounded-lg px-3 py-3 text-base hover:bg-stone-50" bg-cls)
|
|
(a :href href :sx-get href :sx-target "#main-panel"
|
|
:sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
|
|
:class (str "font-medium " select-colours " flex flex-row gap-2")
|
|
(div cat-name)
|
|
(div :aria-label count-label count-str))
|
|
chevron))
|
|
|
|
(defcomp ~market-mobile-sub-link (&key select-colours active href hx-select label count-label count-str)
|
|
(a :class (str "snap-start px-2 py-3 rounded " select-colours " flex flex-row gap-2")
|
|
:aria-selected (if active "true" "false")
|
|
:href href :sx-get href :sx-target "#main-panel"
|
|
:sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
|
|
(div label)
|
|
(div :aria-label count-label count-str)))
|
|
|
|
(defcomp ~market-mobile-subs-panel (&key links)
|
|
(div :class "pb-3 pl-2"
|
|
(div :data-peek-viewport "" :data-peek-size-px "18" :data-peek-edge "bottom" :data-peek-mask "true" :class "m-2 bg-stone-100"
|
|
(div :data-peek-inner "" :class "grid grid-cols-1 gap-1 snap-y snap-mandatory pr-1" :aria-label "Subcategories"
|
|
links))))
|
|
|
|
(defcomp ~market-mobile-view-all (&key href hx-select)
|
|
(div :class "pb-3 pl-2"
|
|
(a :class "px-2 py-1 rounded hover:bg-stone-100 block"
|
|
:href href :sx-get href :sx-target "#main-panel"
|
|
:sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
|
|
"View all")))
|
|
|
|
(defcomp ~market-mobile-cat-details (&key open summary subs)
|
|
(details :class "group/cat py-1" :open open
|
|
summary subs))
|
|
|
|
|
|
;; ---------------------------------------------------------------------------
|
|
;; Composition: mobile nav panel from pre-computed category data
|
|
;; ---------------------------------------------------------------------------
|
|
|
|
(defcomp ~market-mobile-nav-from-data (&key categories all-href all-active hx-select select-colours)
|
|
(~market-mobile-nav-wrapper :items
|
|
(<>
|
|
(~market-mobile-all-link :href all-href :hx-select hx-select
|
|
:active all-active :select-colours select-colours)
|
|
(map (lambda (cat)
|
|
(~market-mobile-cat-details
|
|
:open (get cat "active")
|
|
:summary (~market-mobile-cat-summary
|
|
:bg-cls (if (get cat "active") " bg-stone-900 text-white hover:bg-stone-900" "")
|
|
:href (get cat "href") :hx-select hx-select
|
|
:select-colours select-colours :cat-name (get cat "name")
|
|
:count-label (str (get cat "count") " products")
|
|
:count-str (str (get cat "count"))
|
|
:chevron (~market-mobile-chevron))
|
|
:subs (if (get cat "subs")
|
|
(~market-mobile-subs-panel :links
|
|
(<> (map (lambda (sub)
|
|
(~market-mobile-sub-link
|
|
:select-colours select-colours
|
|
:active (get sub "active")
|
|
:href (get sub "href") :hx-select hx-select
|
|
:label (get sub "label")
|
|
:count-label (str (get sub "count") " products")
|
|
:count-str (str (get sub "count"))))
|
|
(get cat "subs"))))
|
|
(~market-mobile-view-all :href (get cat "href") :hx-select hx-select))))
|
|
categories))))
|