@headlessui/react#Popover TypeScript Examples

Navbar: FC<NavbarProps> = ({ navbarWrapperClassName, projectsList }) => {
  const [shouldNavbarHaveBackground, setShouldNavbarHaveBackground] = useState(false);
  const [isNavbarCollapsed, setNavbarCollapsed] = useState(true);

  const { t } = useTranslation('landing');
  useEffect(() => {
    const handleScroll = () => setShouldNavbarHaveBackground(window.scrollY > 10);
    document.addEventListener('scroll', handleScroll);
    return () => document.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div
      className={`fixed top-0 left-0 w-full z-10 transition duration-100 ${
        (shouldNavbarHaveBackground || !isNavbarCollapsed) && navbarBgStyle
      } ${navbarWrapperClassName ?? ''}`}
    >
      <div className="w-container mx-auto md:flex justify-between items-center">
        <div className="flex justify-between items-center w-full">
          <a {...getScrollToSectionProps('top')}>
            <Brand className="font-bold text-2xl" />
          </a>
          <span className="md:hidden" onClick={() => setNavbarCollapsed(!isNavbarCollapsed)}>
            {isNavbarCollapsed ? <FiMenu /> : <FiX />}
          </span>
        </div>
        <div
          className={`w-full mt-5 md:flex items-center justify-end ${
            isNavbarCollapsed && 'hidden'
          }`}
        >
          <ul className="flex md:flex-row flex-col">
            {
              isFeatureFlagEnabled(publicRuntimeConfig.SHOW_LINKS_TO_APP) && (
                <li className="my-1">
                  <Popover className="relative">
                    <Popover.Button className="font-bold">{t('navbar.schools')}</Popover.Button>
                    <Popover.Panel className={popoverPanelClassName}>
                      <ul>
                        {projectsList.map(({ projectID, appName }) => (
                          <li className="ml-2 md:ml-0 my-2">
                            <a href={`/${projectID}`}>{capitalize(appName)}</a>
                          </li>
                        ))}
                      </ul>
                    </Popover.Panel>
                  </Popover>
                </li>
              )
            }
            <li className="font-bold md:mx-10 my-1">
              <Link href="/calculator">
                <a>{t('navbar.pointsCalculator')}</a>
              </Link>
            </li>
          </ul>
          <span className="block mt-5 md:mt-0 md:ml-5">
            <a
              {...getScrollToSectionProps('support-us')}
              className={[
                'font-bold inline-block w-full sm:w-auto text-center',
                roundedSmallLinkClassName,
              ].join(' ')}
            >
              {t('navbar.supportTheProject')}
            </a>
          </span>
        </div>
      </div>
    </div>
  );
}

SwapSettings: React.FC<Props> = ({
  slippageTolerance,
  setDefaultSlippage,
  setSlippageTolerance,
}) => {
  const onInputChange = (event: { target: { name: any; value: any } }) => {
    const value = event.target.value;
    setSlippageTolerance(value);
  };

  return (
    <Popover className="relative">
      {() => (
        <>
          <Popover.Button
            className="rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            id="open-transaction-settings"
          >
            <span className="sr-only">Swap transation settings</span>
            <StyledIcon
              as="CogIcon"
              size={6}
              className="text-gray-400 transition duration-150 ease-in-out hover:text-indigo-700 dark:hover:text-indigo-400"
            />
          </Popover.Button>
          <Transition
            as={Fragment}
            enter="transition ease-out duration-200"
            enterFrom="opacity-0 translate-y-1"
            enterTo="opacity-100 translate-y-0"
            leave="transition ease-in duration-150"
            leaveFrom="opacity-100 translate-y-0"
            leaveTo="opacity-0 translate-y-1"
          >
            <Popover.Panel className="absolute right-0 z-20 w-screen max-w-sm px-4 mt-3 sm:px-0">
              <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
                <div className="relative p-4 bg-white dark:bg-zinc-800">
                  <div className="inline-flex items-center">
                    <h4 className="text-base font-medium leading-6 text-gray-900 font-headings dark:text-zinc-50">
                      Slippage Tolerance
                    </h4>
                    <div className="ml-2">
                      <Tooltip
                        className="z-10"
                        shouldWrapChildren={true}
                        label={`Your transaction will revert if the price changes unfavorably by more of this percentage`}
                      >
                        <StyledIcon
                          as="InformationCircleIcon"
                          size={5}
                          className="block text-gray-400"
                        />
                      </Tooltip>
                    </div>
                  </div>

                  <div className="flex items-center justify-between mt-2">
                    <button
                      type="button"
                      onClick={setDefaultSlippage}
                      className={classNames(
                        slippageTolerance !== 4
                          ? 'border-gray-300 shadow-sm text-gray-700 bg-white hover:bg-gray-50'
                          : 'border-transparent text-indigo-700 bg-indigo-100 hover:bg-indigo-200',
                        'inline-flex items-center px-4 py-2 border text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
                      )}
                    >
                      Auto
                    </button>

                    <div className="relative flex-1 ml-2 rounded-md shadow-sm">
                      <input
                        type="number"
                        inputMode="decimal"
                        autoComplete="off"
                        autoCorrect="off"
                        id="slippageTolerance"
                        name="slippageTolerance"
                        pattern="^[0-9]*[.,]?[0-9]*$"
                        placeholder="0.10"
                        value={slippageTolerance}
                        onChange={onInputChange}
                        min={0}
                        className="block w-full pr-8 text-right border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                      />
                      <div className="absolute inset-y-0 right-0 flex items-center justify-center w-8 pointer-events-none">
                        <span className="text-gray-500 sm:text-sm">%</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Popover.Panel>
          </Transition>
        </>
      )}
    </Popover>
  );
}