Browser extension manager

What are you most proud of, and what would you do differently next time?

Ui looks pretty good, should be fairly accessible and compares well to the design. Tailwind makes the toggle buttons so easy to animate.

const ToggleButton = ({ active, onClick }) => {
  return (
    <>
      <button
        className={`${active ? "bg-red-700 dark:bg-red-400" : "bg-neutral-300 dark:bg-neutral-600"} flex h-fit w-10 cursor-pointer items-center rounded-full px-[2px] py-[2px] transition-discrete duration-300 ease-in-out focus:outline-2 focus:outline-offset-2 focus:outline-red-400 dark:focus:outline-red-500`}
        onClick={onClick}
        style={{
          "--transition-property": "background-color, box-shadow, transform",
          "--transition-duration": "300ms",
          "--transition-timing": "ease-in-out",
        }}
      >
        <div
          className={`${!active ? "translate-x-0" : "translate-x-5"} bg-neutral-0 size-4 cursor-pointer rounded-full transition-all duration-300 ease-in-out`}
        ></div>
      </button>
    </>
  );
};

export default ToggleButton;

What challenges did you encounter, and how did you overcome them?

Asynchronous state was initially a problem between the state of the data and the filtered state controlled by the nav buttons.

What specific areas of your project would you like help with?

Any feedback is appreciated.