(defcomp ~calendar-entry-nav (&key href name date-str nav-class)
  (a :href href :class nav-class
    (div :class "w-8 h-8 rounded bg-stone-200 flex-shrink-0")
    (div :class "flex-1 min-w-0"
      (div :class "font-medium truncate" name)
      (div :class "text-xs text-stone-600 truncate" date-str))))

(defcomp ~calendar-link-nav (&key href name nav-class is-selected select-colours)
  (a :href href
     :sx-get href
     :sx-target "#main-panel"
     :sx-select "#main-panel"
     :sx-swap "outerHTML"
     :sx-push-url "true"
     :aria-selected (when is-selected "true")
     :class (str (or nav-class "") " " (or select-colours ""))
    (i :class "fa fa-calendar" :aria-hidden "true")
    (span name)))

(defcomp ~market-link-nav (&key href name nav-class select-colours)
  (a :href href :class (str (or nav-class "") " " (or select-colours ""))
    (i :class "fa fa-shopping-bag" :aria-hidden "true")
    (span name)))

(defcomp ~relation-nav (&key href name icon nav-class relation-type)
  (a :href href :class (or nav-class "flex items-center gap-3 rounded-lg py-2 px-3 text-sm text-stone-700 hover:bg-stone-100 transition-colors")
    (when icon
      (div :class "w-8 h-8 rounded bg-stone-200 flex items-center justify-center flex-shrink-0"
        (i :class icon :aria-hidden "true")))
    (div :class "flex-1 min-w-0"
      (div :class "font-medium truncate" name))))