@heroicons/react/solid#CheckIcon TypeScript Examples

SelectCheck = ({
  active,
  className,
  ...rest
}: CustomSelectCheckProps & React.ComponentPropsWithRef<'span'>): JSX.Element => (
  <span
    className={clsx(
      active ? 'text-white' : 'text-interlayDenim',
      'absolute',
      'inset-y-0',
      'right-0',
      'flex',
      'items-center',
      'pr-4',
      className
    )}
    {...rest}
  >
    <CheckIcon className={clsx('h-5', 'w-5')} aria-hidden='true' />
  </span>
)

Notifications = (_: Props) => {
  const dispatch = useAppDispatch()
  const unreadNotificationsCount = useAppSelector(state => state.notifications.notifications.filter(n => n.unread).length)

  return (
    <div
      onClick={async (e) => {
        e.preventDefault()
        await dispatch(markAllNotificationsAsRead())
      }}
    >
      {unreadNotificationsCount !== 0 &&
        <div className='mobile-all-read-button'>
          <CheckIcon />
        </div>
      }
      <NotificationList />
    </div>
  )
}

export function TokenPriceSelect({ tokenPrices, selected, setSelected }: Props) {
  return (
    <Listbox value={selected} onChange={setSelected}>
      {({ open }) => (
        <>
          <Listbox.Label className="block text-sm font-medium text-gray-700 sr-only">Token price</Listbox.Label>
          <div className="relative mt-1">
            <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white border border-gray-300 rounded-md shadow-sm cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
              <span className="block truncate">{selected.name}</span>
              <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
                <SelectorIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
              </span>
            </Listbox.Button>

            <Transition
              show={open}
              as={Fragment}
              leave="transition ease-in duration-100"
              leaveFrom="opacity-100"
              leaveTo="opacity-0"
            >
              <Listbox.Options className="absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
                {tokenPrices.map((token:any) => (
                  <Listbox.Option
                    key={token.id}
                    className={({ active }) =>
                      classNames(
                        active ? 'text-white bg-indigo-600' : 'text-gray-900',
                        'cursor-default select-none relative py-2 pl-3 pr-9'
                      )
                    }
                    value={token}
                  >
                    {({ selected, active }) => (
                      <>
                        <span className={classNames(selected ? 'font-semibold' : 'font-normal', 'block truncate')}>
                          {token.name}
                        </span>

                        {selected ? (
                          <span
                            className={classNames(
                              active ? 'text-white' : 'text-indigo-600',
                              'absolute inset-y-0 right-0 flex items-center pr-4'
                            )}
                          >
                            <CheckIcon className="w-5 h-5" aria-hidden="true" />
                          </span>
                        ) : null}
                      </>
                    )}
                  </Listbox.Option>
                ))}
              </Listbox.Options>
            </Transition>
          </div>
        </>
      )}
    </Listbox>
  )
}

Steps = ({ stepState }) => {
  const steps = stepState;

  return (
    <nav aria-label="Progress">
      <ol className="relative rounded-md mx-auto flex items-center">
        {steps.map((step, stepIdx) => (
          <li key={step.name} className="relative flex-1 flex">
            {step.status === "complete" ? (
              <div className="group flex items-center w-full">
                <span className="px-1 sm:px-6 py-4 flex items-center text-sm font-medium">
                  <span className="flex-shrink-0 w-10 h-10 flex items-center justify-center bg-teal-600 rounded-full group-hover:bg-teal-800">
                    <CheckIcon
                      className="w-6 h-6 text-white"
                      aria-hidden="true"
                    />
                  </span>
                  <span className="ml-2 sm:ml-4 text-xs sm:text-sm font-medium text-teal-600">
                    {step.name}
                  </span>
                </span>
              </div>
            ) : step.status === "current" ? (
              <div className="group flex items-center">
                <span
                  className="px-1 sm:px-6 py-4 flex items-center text-sm font-medium"
                  aria-current="step"
                >
                  <span className="flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-teal-600 rounded-full">
                    <span className="text-teal-600">{step.id}</span>
                  </span>
                  <span className="ml-2 sm:ml-4 text-xs sm:text-sm font-medium text-teal-600">
                    {step.name}
                  </span>
                </span>
              </div>
            ) : (
              <div className="group flex items-center">
                <span className="px-1 sm:px-6 py-4 flex items-center text-sm font-medium">
                  <span className="flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400">
                    <span className="text-gray-500 group-hover:text-gray-900">
                      {step.id}
                    </span>
                  </span>
                  <span className="ml-2 sm:ml-4 text-xs sm:text-sm font-medium text-gray-500 group-hover:text-gray-900">
                    {step.name}
                  </span>
                </span>
              </div>
            )}

            {stepIdx !== steps.length - 1 && (
              <>
                {/* Arrow separator for lg screens and up */}
                <div
                  className="hidden md:block absolute top-0 right-0 h-full w-5"
                  aria-hidden="true"
                >
                  <svg
                    className="h-full w-full text-teal-brand"
                    viewBox="0 0 22 80"
                    fill="none"
                    preserveAspectRatio="none"
                  >
                    <path
                      d="M0 -2L20 40L0 82"
                      vectorEffect="non-scaling-stroke"
                      stroke="currentcolor"
                      strokeLinejoin="round"
                    />
                  </svg>
                </div>
              </>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}

NewVaultWizardNav = ({ currentSection, setStep }) => {
  const vaultCreationSections = [
    {
      id: '01',
      name: 'Collateral',
      description: 'Choose your type of collateral',
      href: '/vaults/new',
      status: 'current',
    },
    {
      id: '02',
      name: 'Details',
      description: 'Collateral amount and USDA minting',
      href: '#',
      status: 'upcoming',
    },
    {
      id: '03',
      name: 'Confirmation',
      description: 'Ready to open your vault?',
      href: '#',
      status: 'upcoming',
    },
  ];

  vaultCreationSections.forEach((section, index) => {
    if (index < currentSection) {
      section.status = 'complete';
    } else if (index === currentSection) {
      section.status = 'current';
    } else {
      section.status = 'upcoming';
    }
  });

  return (
    <div className="relative overflow-hidden rounded-md lg:border-t lg:border-b lg:border-gray-200 dark:lg:border-zinc-600">
      <nav className="bg-white dark:bg-zinc-800" aria-label="New Vault Wizard Navigation">
        <ol
          role="list"
          className="overflow-hidden lg:flex lg:border-l lg:border-r lg:border-gray-200 dark:lg:border-zinc-600"
        >
          {vaultCreationSections.map((section, sectionIdx) => (
            <li key={section.id} className="relative overflow-hidden lg:flex-1">
              <div
                className={classNames(
                  sectionIdx === 0 ? 'border-b-0' : '',
                  sectionIdx === vaultCreationSections.length - 1 ? 'border-t-0' : '',
                  'border border-gray-200 dark:border-zinc-600 overflow-hidden lg:border-0'
                )}
              >
                {section.status === 'complete' ? (
                  <button
                    onClick={() => {
                      setStep(sectionIdx);
                    }}
                    className="group"
                  >
                    <span
                      className="absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto"
                      aria-hidden="true"
                    />
                    <span
                      className={classNames(
                        sectionIdx !== 0 ? 'lg:pl-9' : '',
                        'px-6 py-5 flex items-start text-sm font-medium'
                      )}
                    >
                      <span className="shrink-0">
                        <span className="flex items-center justify-center w-10 h-10 bg-indigo-600 rounded-full dark:bg-indigo-400">
                          <CheckIcon
                            className="w-6 h-6 text-white dark:text-zinc-700"
                            aria-hidden="true"
                          />
                        </span>
                      </span>
                      <span className="mt-0.5 ml-4 min-w-0 flex flex-col">
                        <span className="text-base text-left font-headings">{section.name}</span>
                        <span className="text-sm font-medium text-gray-500 dark:text-zinc-400">
                          {section.description}
                        </span>
                      </span>
                    </span>
                  </button>
                ) : section.status === 'current' ? (
                  <RouterLink to={section.href} aria-current="step">
                    <span
                      className="absolute top-0 left-0 w-1 h-full bg-indigo-600 dark:bg-indigo-400 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto"
                      aria-hidden="true"
                    />
                    <span
                      className={classNames(
                        sectionIdx !== 0 ? 'lg:pl-9' : '',
                        'px-6 py-5 flex items-start text-sm font-medium'
                      )}
                    >
                      <span className="shrink-0">
                        <span className="flex items-center justify-center w-10 h-10 border-2 border-indigo-600 rounded-full dark:border-indigo-400">
                          <span className="font-semibold text-indigo-600 dark:text-indigo-400">
                            {section.id}
                          </span>
                        </span>
                      </span>
                      <span className="mt-0.5 ml-4 min-w-0 flex flex-col">
                        <span className="text-base text-indigo-600 dark:text-indigo-400 font-headings">
                          {section.name}
                        </span>
                        <span className="text-sm font-medium text-gray-500 dark:text-zinc-400">
                          {section.description}
                        </span>
                      </span>
                    </span>
                  </RouterLink>
                ) : (
                  <RouterLink to={section.href} className="group">
                    <span
                      className="absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto"
                      aria-hidden="true"
                    />
                    <span
                      className={classNames(
                        sectionIdx !== 0 ? 'lg:pl-9' : '',
                        'px-6 py-5 flex items-start text-sm font-medium'
                      )}
                    >
                      <span className="shrink-0">
                        <span className="flex items-center justify-center w-10 h-10 border-2 border-gray-300 rounded-full">
                          <span className="text-gray-500 dark:text-zinc-400">{section.id}</span>
                        </span>
                      </span>
                      <span className="mt-0.5 ml-4 min-w-0 flex flex-col">
                        <span className="text-base text-gray-500 dark:text-zinc-400 font-headings">
                          {section.name}
                        </span>
                        <span className="text-sm font-medium text-gray-500 dark:text-zinc-400">
                          {section.description}
                        </span>
                      </span>
                    </span>
                  </RouterLink>
                )}

                {sectionIdx !== 0 ? (
                  <>
                    {/* Separator */}
                    <div
                      className="absolute inset-0 top-0 left-0 hidden w-3 lg:block"
                      aria-hidden="true"
                    >
                      <svg
                        className="w-full h-full text-gray-300 dark:text-zinc-700"
                        viewBox="0 0 12 82"
                        fill="none"
                        preserveAspectRatio="none"
                      >
                        <path
                          d="M0.5 0V31L10.5 41L0.5 51V82"
                          stroke="currentcolor"
                          vectorEffect="non-scaling-stroke"
                        />
                      </svg>
                    </div>
                  </>
                ) : null}
              </div>
            </li>
          ))}
        </ol>
      </nav>
    </div>
  );
}

Page: NextPage<Props> = ({ products }) => {
  const [subscription, setSubscription] = useState<Subscription>();
  const { status } = useSession();
  const router = useRouter();

  const [billingInterval, setBillingInterval] =
    useState<PriceInterval>('month');

  useEffect(() => {
    (async () => {
      if (status === 'authenticated') {
        const res = await fetch('/api/user/subscription');

        const data = await res.json();

        if (data.subscription) {
          setSubscription(data.subscription);
        }
      }
    })();
  }, [status]);

  const handlePricingClick = useCallback(
    async (priceId: string) => {
      if (status !== 'authenticated') {
        return router.push('/api/auth/signin');
      }

      if (subscription) {
        return router.push('/account');
      }

      const res = await fetch('/api/stripe/create-checkout-session', {
        method: 'POST',
        headers: {
          'content-type': 'application/json',
        },
        body: JSON.stringify({
          price: priceId,
        }),
      });

      const data = await res.json();

      const stripe = await getStripe();

      stripe?.redirectToCheckout({ sessionId: data.sessionId });
    },
    [status, router, subscription]
  );

  return (
    <div className="bg-white">
      <Navbar />
      <div className="px-4 py-24 mx-auto max-w-7xl sm:px-6 lg:px-8">
        <div className="sm:flex sm:flex-col sm:align-center">
          <h1 className="text-6xl font-extrabold text-gray-800 sm:text-center">
            Pricing Plans
          </h1>
          <p className="mt-5 text-xl text-gray-500 sm:text-center">
            Start building for free, then add a site plan to go live. Account
            plans unlock additional features.
          </p>
          <div className="relative self-center mt-6 bg-gray-100 rounded-lg p-0.5 flex sm:mt-8">
            <button
              onClick={() => setBillingInterval('month')}
              type="button"
              className={classNames(
                'relative w-1/2  py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8 rounded-lg',
                {
                  'bg-white border-gray-200 shadow-sm rounded-md text-gray-900':
                    billingInterval === 'month',
                  'bg-transparent': billingInterval !== 'month',
                }
              )}
            >
              Monthly billing
            </button>
            <button
              onClick={() => setBillingInterval('year')}
              type="button"
              className={classNames(
                'relative w-1/2 bg-white  py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8 rounded-lg',
                {
                  'bg-white border-gray-200 shadow-sm rounded-md text-gray-900':
                    billingInterval === 'year',
                  'bg-transparent': billingInterval !== 'year',
                }
              )}
            >
              Yearly billing
            </button>
          </div>
        </div>
        <div className="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4">
          {products
            .sort(
              (a, b) =>
                a?.prices?.find((one) => one.interval === billingInterval)
                  ?.unitAmount! -
                b?.prices?.find((one) => one.interval === billingInterval)
                  ?.unitAmount!
            )
            .map((product) => {
              const price: Price = (product as any)?.prices?.find(
                (one: Price) => one.interval === billingInterval
              );

              if (!price) {
                return null;
              }

              return (
                <div
                  key={product.name}
                  className={classNames(
                    'border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200',
                    {
                      'ring-indigo-500 ring-2':
                        subscription?.priceId === price.id,
                    }
                  )}
                >
                  <div className="p-6">
                    <h2 className="text-lg font-medium leading-6 text-gray-900">
                      {product.name}
                    </h2>
                    <p className="mt-4 text-sm text-gray-500">
                      {product.description}
                    </p>
                    <p className="mt-8">
                      <span className="text-4xl font-extrabold text-gray-900">
                        ${price.unitAmount! / 100}
                      </span>{' '}
                      <span className="text-base font-medium text-gray-500">
                        /mo
                      </span>
                    </p>
                    <a
                      onClick={() => handlePricingClick(price.id)}
                      className="block w-full py-2 mt-8 text-sm font-semibold text-center text-white bg-gray-900 border border-black rounded-md hover:bg-gray-700 hover:cursor-pointer"
                    >
                      Buy {product.name}
                    </a>
                  </div>
                  <div className="px-6 pt-6 pb-8">
                    <h3 className="text-xs font-medium tracking-wide text-gray-900 uppercase">
                      {"What's included"}
                    </h3>
                    <ul role="list" className="mt-6 space-y-4">
                      {[
                        'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
                        'Cum repellendus libero non expedita quam eligendi',
                        'a deserunt beatae debitis culpa asperiores ipsum facilis,',
                        'excepturi reiciendis accusantium nemo quos id facere!',
                      ].map((feature) => (
                        <li key={feature} className="flex space-x-3">
                          <CheckIcon
                            className="flex-shrink-0 w-5 h-5 text-green-500"
                            aria-hidden="true"
                          />
                          <span className="text-sm text-gray-500">
                            {feature}
                          </span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              );
            })}
        </div>
      </div>

      <Footer />
    </div>
  );
}

function Option<T>({ children, ...props }: OptionProps<DropdownOption<T>, false>) {
  return (
    <components.Option {...props}>
      <span>{children}</span>
      {props.isSelected && <CheckIcon className="selected" />}
    </components.Option>
  );
}

function MemberSearch({ members, setSelectedMemberId }) {
  const [query, setQuery] = useState('');
  const [selectedMember, setSelectedMember] = useState();

  const filteskyMembers =
    query === ''
      ? members
      : members.filter((member) => {
        return member.name.toLowerCase().includes(query.toLowerCase())
      });

  const handleSelectedMember = member => {
    setSelectedMember(member);
    setSelectedMemberId(member.id);
  };

  return (
    <Combobox as="div" value={selectedMember} onChange={handleSelectedMember}>
      <Combobox.Label className="block text-sm font-medium text-gray-700">Select Member</Combobox.Label>
      <div className="relative mt-1">
        <Combobox.Input
          className="w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm"
          onChange={(event) => setQuery(event.target.value)}
          displayValue={(member) => member.name}
        />
        <Combobox.Button className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
          <SelectorIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
        </Combobox.Button>

        {filteskyMembers.length > 0 && (
          <Combobox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
            {filteskyMembers.map((member) => (
              <Combobox.Option
                key={member.id}
                value={member}
                className={({ active }) =>
                  classNames(
                    'relative cursor-default select-none py-2 pl-3 pr-9',
                    active ? 'bg-sky-600 text-white' : 'text-gray-900'
                  )
                }
              >
                {({ active, selected }) => (
                  <>
                    <div className="flex">
                      <span className={classNames('truncate', selected && 'font-semibold')}>{member.name}</span>
                      <span
                        className={classNames(
                          'ml-2 truncate text-gray-500',
                          active ? 'text-sky-200' : 'text-gray-500'
                        )}
                      >
                        {member.email}
                      </span>
                    </div>

                    {selected && (
                      <span
                        className={classNames(
                          'absolute inset-y-0 right-0 flex items-center pr-4',
                          active ? 'text-white' : 'text-sky-600'
                        )}
                      >
                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
                      </span>
                    )}
                  </>
                )}
              </Combobox.Option>
            ))}
          </Combobox.Options>
        )}
      </div>
    </Combobox>
  )
}