(defcomp ~shared:navigation/calendar-entry-nav (&key (href :as string) (name :as string) (date-str :as string) (nav-class :as string?))
  (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 ~shared:navigation/calendar-link-nav (&key (href :as string) (name :as string) (nav-class :as string?)
                                   (is-selected :as string?) (select-colours :as string?))
  (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 ~shared:navigation/market-link-nav (&key (href :as string) (name :as string) (nav-class :as string?)
                                 (select-colours :as string?))
  (a :href href :class (str (or nav-class "") " " (or select-colours ""))
    (i :class "fa fa-shopping-bag" :aria-hidden "true")
    (span name)))

(defcomp ~shared:navigation/relation-nav (&key (href :as string) (name :as string) (icon :as string?)
                              (nav-class :as string?) (relation-type :as string?))
  (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))))