(defcomp
  ()
  (div
    (~tw :tokens "space-y-3")
    (div
      (label (~tw :tokens "block text-sm font-medium text-stone-700 mb-1") "Category")
      (select
        :name "category"
        :sx-get "/sx/(geography.(hypermedia.(example.(api.values))))"
        :sx-trigger "change"
        :sx-target "#value-items"
        :sx-swap "innerHTML"
        (~tw :tokens "w-full px-3 py-2 border border-stone-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-violet-500")
        (option :value "" "Pick a category...")
        (option :value "Languages" "Languages")
        (option :value "Frameworks" "Frameworks")
        (option :value "Databases" "Databases")))
    (div
      (label (~tw :tokens "block text-sm font-medium text-stone-700 mb-1") "Item")
      (select
        :id "value-items"
        (~tw :tokens "w-full px-3 py-2 border border-stone-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-violet-500")
        (option :value "" "Select a category first...")))))
