[UXIT-1713] Refactor ListboxButton and reuse instead of native headless ui component

[barbaraperic]

📝 Description

This PR refactors the ListboxButton component and replaces the Headless UI ListboxButton with our custom implementation.

• One things we can improve - in ListboxButton icon, how can we avoid prefixIcon ?? CaretDown if isCompactis true

      <div className={`${isCompact ? 'flex' : 'hidden'}`}>
        <Icon component={prefixIcon ?? CaretDown} />
      </div>

• Type: Refactor

🛠️ Key Changes

• ListboxButton component
• I created a new useViewport hook - wanted to avoid nesting divs with classes hidden md:block as LisboxButton needs to be a direct descendants of Listbox, otherwise it breaks. Example on the blog page, where we conditionally render LisboxButton with ArrowUpDown icon if on mobile screen.

🧪 How to Test

• ListboxButton is used in sorting/filtering parts in blog, events, ecosystem-explorer and in mobile view in security/maturity-model

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
filecoin-foundation-site	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 11, 2024 10:15am

[notion-workspace[bot]]

[FF] Refactor Listbox

[notion-workspace[bot]]

[FF] Refactor ListboxButton

[barbaraperic]

I've suggested some rework @barbaraperic, we can discuss and/or implement these live if you want :)

Also, regarding your question in the PR description, could we add the md:w-40 in the layout component as below?

FilterContainer.MobileFiltersAndResults = function MobileFiltersAndResults({
  search,
  category,
  sort,
  results,
}: FilterProps) {
  return (
    <div className="flex flex-col gap-4 lg:hidden">
      <div className="flex flex-col gap-3 sm:flex-row">
        {search}
        <div className="flex flex-1 gap-3 sm:flex-row">
          <div className="w-full md:w-40">{category}</div>
          <div className="max-fit md:w-40">{sort}</div>
        </div>
      </div>
      {results}
    </div>
  )
}

Ah great yes, thank you. I tried that, but some reason I thought it didn't work.