;; Market grid and layout components

(defcomp ~grids/markets-grid (&key cards)
  (<> (div :class "max-w-full px-3 py-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4" cards) (div :class "pb-8")))

(defcomp ~grids/product-grid (&key cards)
  (<> (div :class "grid grid-cols-1 sm:grid-cols-3 md:grid-cols-6 gap-3" cards) (div :class "pb-8")))

(defcomp ~grids/admin-content-wrap (&key inner)
  (div :id "main-panel" inner))

(defcomp ~grids/like-toggle-button (&key colour action hx-headers label icon-cls)
  (button :class (str "flex items-center gap-1 " colour " hover:text-red-600 transition-colors w-[1em] h-[1em]")
          :sx-post action :sx-target "this" :sx-swap "outerHTML" :sx-push-url "false"
          :sx-headers hx-headers
          :sx-swap-settle "0ms" :aria-label label
    (i :aria-hidden "true" :class icon-cls)))