@heroicons/react/solid#CogIcon TypeScript Examples

The following examples show how to use @heroicons/react/solid#CogIcon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: NavBar.tsx    From server with MIT License 6 votes vote down vote up
DesktopNavBar = () => {
  const history = useHistory()
  const path = useLocation().pathname

  return (
    <div className="nav-bar-container nav-bar-top" onClick={() => {window.scrollTo({ top: 0, behavior: 'smooth'})}}>
      <div
        className={`nav-bar-button-container nav-bar-button-container-aligned ${handleNavItemActiveClass(path, "/")}`}
        onClick={() => {
          history.push('/')
        }}
      >
        <HomeIcon />
        <span className='nav-bar-button-text'>Home</span>
      </div>
      <div
        className={`nav-bar-button-container nav-bar-button-container-aligned ${handleNavItemActiveClass(path, "/users")}`}
        onClick={() => {history.push('/users')}}
      >
        <UserGroupIcon />
        <span className='nav-bar-button-text'>Users</span>
      </div>
      <div
        className={`nav-bar-button-container nav-bar-button-container-aligned ${handleNavItemActiveClass(path, "/profile")}`}
        onClick={() => {history.push('/profile')}}
      >
        <UserCircleIcon />
        <span className='nav-bar-button-text'>Profile</span>
      </div>
      <div
        className={`nav-bar-button-container nav-bar-button-container-aligned ${handleNavItemActiveClass(path, "/settings")}`}
        onClick={() => {history.push('/settings')}}
      >
        <CogIcon />
        <span className='nav-bar-button-text'>Settings</span>
      </div>
    </div>
  )
}
Example #2
Source File: FileMenu.tsx    From ide with Mozilla Public License 2.0 4 votes vote down vote up
FileMenu = (props: FileMenuProps): JSX.Element => {
  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(
    null
  );
  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement: 'bottom-start',
  });
  const [permission] = useAtom(actualUserPermissionAtom);
  const canWrite = permission === 'OWNER' || permission === 'READ_WRITE';

  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <Menu as="div" className="relative inline-block text-left">
      {({ open }) => (
        <>
          <div>
            <Menu.Button
              className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium text-gray-200 hover:bg-gray-800 focus:bg-gray-800 focus:outline-none"
              ref={setReferenceElement}
            >
              File
              <ChevronDownIcon
                className="-mr-1 ml-2 h-5 w-5"
                aria-hidden="true"
              />
            </Menu.Button>
          </div>

          <Transition show={open}>
            {mounted
              ? ReactDOM.createPortal(
                  <Menu.Items static as="div">
                    <div
                      ref={setPopperElement}
                      style={styles.popper}
                      {...attributes.popper}
                      className="relative"
                    >
                      <Transition.Child
                        as={Fragment}
                        enter="transition ease-out duration-100"
                        enterFrom="transform opacity-0 scale-95"
                        enterTo="transform opacity-100 scale-100"
                        leave="transition ease-in duration-75"
                        leaveFrom="transform opacity-100 scale-100"
                        leaveTo="transform opacity-0 scale-95"
                      >
                        <div className="origin-top-left absolute z-10 left-0 w-56 shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none">
                          <div className="py-1">
                            <Menu.Item>
                              {({ active }) => (
                                <a
                                  href="/"
                                  target="_blank"
                                  className={classNames(
                                    active
                                      ? 'bg-gray-700 text-gray-100'
                                      : 'text-gray-200',
                                    'group flex items-center px-4 py-2 text-sm'
                                  )}
                                >
                                  <PlusIcon
                                    className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-300"
                                    aria-hidden="true"
                                  />
                                  New File
                                </a>
                              )}
                            </Menu.Item>
                            <Menu.Item>
                              {({ active }) => (
                                <button
                                  type="button"
                                  className={classNames(
                                    active
                                      ? 'bg-gray-700 text-gray-100'
                                      : 'text-gray-200',
                                    'group flex items-center px-4 py-2 text-sm w-full focus:outline-none'
                                  )}
                                  onClick={() => props.onDownloadFile()}
                                >
                                  <DownloadIcon
                                    className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-300"
                                    aria-hidden="true"
                                  />
                                  Download File
                                </button>
                              )}
                            </Menu.Item>
                            <Menu.Item>
                              {({ active }) => (
                                <a
                                  href={props.forkButtonUrl}
                                  target="_blank"
                                  rel="noreferrer"
                                  className={classNames(
                                    active
                                      ? 'bg-gray-700 text-gray-100'
                                      : 'text-gray-200',
                                    'group flex items-center px-4 py-2 text-sm w-full focus:outline-none'
                                  )}
                                >
                                  <DuplicateIcon
                                    className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-300"
                                    aria-hidden="true"
                                  />
                                  Clone File
                                </a>
                              )}
                            </Menu.Item>
                            {canWrite && (
                              <Menu.Item>
                                {({ active }) => (
                                  <button
                                    type="button"
                                    className={classNames(
                                      active
                                        ? 'bg-gray-700 text-gray-100'
                                        : 'text-gray-200',
                                      'group flex items-center px-4 py-2 text-sm w-full focus:outline-none'
                                    )}
                                    onClick={() => props.onInsertFileTemplate()}
                                  >
                                    <TemplateIcon
                                      className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-300"
                                      aria-hidden="true"
                                    />
                                    Reset File to Template
                                  </button>
                                )}
                              </Menu.Item>
                            )}
                            <Menu.Item>
                              {({ active }) => (
                                <button
                                  type="button"
                                  className={classNames(
                                    active
                                      ? 'bg-gray-700 text-gray-100'
                                      : 'text-gray-200',
                                    'group flex items-center px-4 py-2 text-sm w-full focus:outline-none'
                                  )}
                                  onClick={() => props.onOpenSettings()}
                                >
                                  <CogIcon
                                    className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-300"
                                    aria-hidden="true"
                                  />
                                  Settings
                                </button>
                              )}
                            </Menu.Item>
                          </div>
                        </div>
                      </Transition.Child>
                    </div>
                  </Menu.Items>,
                  document.body
                )
              : null}
          </Transition>
        </>
      )}
    </Menu>
  );
}