steven-tey / precedent

An opinionated collection of components, hooks, and utilities for your Next.js project.

Home Page:https://precedent.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

openPopover state doesn't work

2ne opened this issue · comments

commented

Chevron doesn't rotate as intended as the openPopover state never changes in component-grid.tsx

      <Popover
        content={
          <div className="w-full p-2 bg-white rounded-md sm:w-40">
            <button className="relative flex items-center justify-start w-full p-2 space-x-2 text-sm text-left transition-all duration-75 rounded-md hover:bg-gray-100 active:bg-gray-200">
              Item 1
            </button>
            <button className="relative flex items-center justify-start w-full p-2 space-x-2 text-sm text-left transition-all duration-75 rounded-md hover:bg-gray-100 active:bg-gray-200">
              Item 2
            </button>
            <button className="relative flex items-center justify-start w-full p-2 space-x-2 text-sm text-left transition-all duration-75 rounded-md hover:bg-gray-100 active:bg-gray-200">
              Item 3
            </button>
          </div>
        }
        openPopover={openPopover}
        setOpenPopover={setOpenPopover}
      >
        <button className="flex items-center justify-between w-40 px-4 py-2 transition-all duration-75 border border-gray-300 rounded-md hover:border-gray-800 focus:outline-none active:bg-gray-100">
          {openPopover && <p className="text-gray-600">Popover</p>}
          <ChevronDown
            className={`h-4 w-4 text-gray-600 ${
              openPopover ? "rotate-180" : ""
            }`}
          />
        </button>
      </Popover>

I believe this has been fixed!! Thanks for the heads-up!