react-icons/bs#BsSunFill TypeScript Examples

The following examples show how to use react-icons/bs#BsSunFill. 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: BlogNav.tsx    From vignette-web with MIT License 4 votes vote down vote up
Nav: React.FC = () => {
  const { t } = useTranslation([`nav`, `common`])
  const [isOpen, setIsOpen] = useState<boolean>(false)
  const toggleMenu = () => (isOpen ? setIsOpen(false) : setIsOpen(true))
  const [mounted, setMounted] = useState(false)
  const { resolvedTheme, setTheme } = useTheme()

  const router = useRouter()

  // A flag to know when the page has mounted so the theme can be accessed
  useEffect(() => setMounted(true), [])

  return (
    <>
      {` `}
      <a
        href="#content"
        className="text-md absolute -top-7 z-50 ml-3 -translate-y-12 transform rounded-md border border-gray-300 bg-white px-3 py-2 tracking-tight outline-none transition-transform duration-100 focus:translate-y-12 dark:border-neutral-700 dark:bg-black lg:ml-8"
      >
        Skip to content
      </a>
      {` `}
      <div className="relative z-30 mx-auto flex w-full max-w-7xl items-center justify-between bg-transparent py-6 px-4  sm:px-8 lg:px-4 ">
        <div className="flex items-center">
          <Link href="/blog" passHref>
            <a className="text-lg font-bold lg:text-xl">
              {t(`blog:nav-title`)}
            </a>
          </Link>
        </div>

        <div className=" mx-4 ml-auto hidden items-center gap-4 sm:flex ">
          <MyListbox router={router} />
          <button
            className="outline-none"
            onClick={() =>
              setTheme(resolvedTheme === `dark` ? `light` : `dark`)
            }
          >
            {mounted ? (
              resolvedTheme == `dark` ? (
                <BsSunFill size={18} />
              ) : (
                <BsMoonFill size={18} />
              )
            ) : (
              <div className="w-[18px]" />
            )}
          </button>
          <Link href="https://github.com/vignetteapp" passHref>
            <a className="outline-none">
              <AiFillGithub size={24} />
            </a>
          </Link>
          <Link href="https://twitter.com/vignette_org" passHref>
            <a className="outline-none">
              <AiOutlineTwitter size={24} />
            </a>
          </Link>

          <button className="rounded-full bg-pinkRed px-8 py-1 font-semibold text-white ">
            {t(`download`)}
          </button>
        </div>
        <div className="flex items-center lg:hidden">
          <button className="" onClick={toggleMenu}>
            <GiHamburgerMenu size="28" className="fill-neutral-100" />
          </button>
          <Transition appear show={isOpen} as={Fragment}>
            <Dialog
              open={isOpen}
              onClose={() => setIsOpen(false)}
              className="fixed inset-0 z-50 lg:hidden"
            >
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-100"
                enterFrom="opacity-0"
                enterTo="opacity-100"
                leave="ease-in duration-75"
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
              >
                <Dialog.Overlay className="fixed inset-0 bg-black/20 backdrop-blur-sm dark:bg-neutral-900/80 " />
              </Transition.Child>
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-100"
                enterFrom="opacity-0 scale-95"
                enterTo="opacity-100 scale-100"
                leave="ease-in duration-75"
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
                <div className="dark:highlight-white/5 fixed top-4 right-4 w-full max-w-xs rounded-lg bg-white p-6 text-base font-semibold text-gray-900 shadow-lg dark:bg-neutral-900 dark:text-gray-300">
                  <button
                    onClick={() => setIsOpen(false)}
                    className="absolute top-5 right-5 flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-600 dark:text-gray-200 dark:hover:text-gray-100"
                  >
                    <span className="sr-only">Close navigation</span>
                    <svg
                      viewBox="0 0 10 10"
                      className="h-2.5 w-2.5 overflow-visible"
                      aria-hidden="true"
                    >
                      <path
                        d="M0 0L10 10M10 0L0 10"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                      ></path>
                    </svg>
                  </button>
                  <ul className="space-y-6">
                    <li>
                      <Link href="/">
                        <a>{t(`nav:home`)}</a>
                      </Link>
                    </li>
                    <li>
                      <Link href="/features">
                        <a>{t(`nav:features`)}</a>
                      </Link>
                    </li>
                    <li>
                      <Link href="/about">
                        <a>{t(`nav:about`)}</a>
                      </Link>
                    </li>
                    <li>
                      <Link href="/blog">
                        <a>{t(`nav:blog`)}</a>
                      </Link>
                    </li>
                    <li>
                      <Link href="/contact">
                        <a>{t(`nav:contact`)}</a>
                      </Link>
                    </li>
                    <li>
                      <MyListbox router={router} />
                    </li>
                  </ul>
                  <div className="mt-6 border-t border-gray-200 pt-6 dark:border-gray-200/10">
                    <button
                      aria-label="Toggle Dark Mode"
                      type="button"
                      className="general-ring-state flex w-full items-center justify-center rounded-full bg-gray-200 py-3 dark:bg-neutral-700"
                      onClick={() =>
                        setTheme(resolvedTheme === `dark` ? `light` : `dark`)
                      }
                    >
                      {mounted && (
                        <>
                          <div>
                            {resolvedTheme === `dark` ? (
                              <BsSunFill size={18} />
                            ) : (
                              <BsMoonFill size={18} />
                            )}
                          </div>
                          {resolvedTheme === `dark` ? (
                            <p className="ml-3 font-semibold">
                              {t(`common:switch-theme-light`)}
                            </p>
                          ) : (
                            <p className="ml-3 font-semibold">
                              {t(`common:switch-theme-dark`)}
                            </p>
                          )}
                        </>
                      )}
                    </button>
                  </div>
                </div>
              </Transition.Child>
            </Dialog>
          </Transition>
        </div>
      </div>
    </>
  )
}
Example #2
Source File: Nav.tsx    From vignette-web with MIT License 4 votes vote down vote up
Nav: React.FC = () => {
  const { t } = useTranslation([`nav`, `common`])
  const [isOpen, setIsOpen] = useState<boolean>(false)
  const toggleMenu = () => (isOpen ? setIsOpen(false) : setIsOpen(true))
  const [mounted, setMounted] = useState(false)
  const { resolvedTheme, setTheme } = useTheme()

  const router = useRouter()

  // A flag to know when the page has mounted so the theme can be accessed
  useEffect(() => setMounted(true), [])

  return (
    <>
      <a
        href="#content"
        className="text-md absolute -top-7 z-50 ml-3 -translate-y-12 transform rounded-md border border-gray-300 bg-white px-3 py-2 tracking-tight outline-none transition-transform duration-100 focus:translate-y-12 dark:border-neutral-700 dark:bg-black lg:ml-8"
      >
        Skip to content
      </a>

      <div className="mx-auto flex w-full max-w-7xl items-center justify-between bg-transparent py-6 px-4  sm:px-8 lg:px-4 ">
        <div className="flex items-center">
          <Link href="/" passHref>
            <a>
              <Logo />
            </a>
          </Link>

          <div className="mx-8 hidden gap-8 text-sm lg:flex lg:text-base">
            <Link href="/features">{t(`nav:features`)}</Link>

            <Link href="/about">{t(`nav:about`)}</Link>

            <Link href="/plugins">{t(`nav:plugins`)}</Link>

            <Link href="/blog">{t(`nav:blog`)}</Link>
          </div>
        </div>

        <div className=" mx-4 ml-auto hidden items-center gap-4 sm:flex ">
          <MyListbox router={router} />
          <button
            className="outline-none"
            onClick={() =>
              setTheme(resolvedTheme === `dark` ? `light` : `dark`)
            }
          >
            {mounted ? (
              resolvedTheme == `dark` ? (
                <BsSunFill size={18} />
              ) : (
                <BsMoonFill size={18} />
              )
            ) : (
              <div className="w-[18px]" />
            )}
          </button>
          <Link href="https://github.com/vignetteapp" passHref>
            <a className="outline-none">
              <AiFillGithub size={24} />
            </a>
          </Link>
          <Link href="https://twitter.com/vignette_org" passHref>
            <a className="outline-none">
              <AiOutlineTwitter size={24} />
            </a>
          </Link>

          <button className="rounded-full bg-pinkRed px-8 py-1 font-semibold text-white ">
            {t(`download`)}
          </button>
        </div>
        <div className="flex items-center lg:hidden">
          <button className="" onClick={toggleMenu}>
            <GiHamburgerMenu
              size="28"
              className="fill-primary dark:fill-neutral-100"
            />
          </button>
          <Transition appear show={isOpen} as={Fragment}>
            <Dialog
              open={isOpen}
              onClose={() => setIsOpen(false)}
              className="fixed inset-0 z-50 lg:hidden"
            >
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-100"
                enterFrom="opacity-0"
                enterTo="opacity-100"
                leave="ease-in duration-75"
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
              >
                <Dialog.Overlay className="fixed inset-0 bg-black/20 backdrop-blur-sm dark:bg-neutral-900/80 " />
              </Transition.Child>
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-100"
                enterFrom="opacity-0 scale-95"
                enterTo="opacity-100 scale-100"
                leave="ease-in duration-75"
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
                <div className="dark:highlight-white/5 fixed top-4 right-4 w-full max-w-xs rounded-lg bg-white p-6 text-base font-semibold text-gray-900 shadow-lg dark:bg-neutral-900 dark:text-gray-300">
                  <button
                    onClick={() => setIsOpen(false)}
                    className="absolute top-5 right-5 flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-600 dark:text-gray-200 dark:hover:text-gray-100"
                  >
                    <span className="sr-only">Close navigation</span>
                    <svg
                      viewBox="0 0 10 10"
                      className="h-2.5 w-2.5 overflow-visible"
                      aria-hidden="true"
                    >
                      <path
                        d="M0 0L10 10M10 0L0 10"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                      ></path>
                    </svg>
                  </button>
                  <ul className="space-y-6">
                    <li>
                      <Link href="/">
                        <a>{t(`nav:home`)}</a>
                      </Link>
                    </li>
                    <li>
                      <Link href="/features">
                        <a>{t(`nav:features`)}</a>
                      </Link>
                    </li>
                    <li>
                      <Link href="/about">
                        <a>{t(`nav:about`)}</a>
                      </Link>
                    </li>
                    <li>
                      <Link href="/blog">
                        <a>{t(`nav:blog`)}</a>
                      </Link>
                    </li>
                    <li>
                      <Link href="/contact">
                        <a>{t(`nav:contact`)}</a>
                      </Link>
                    </li>
                    <li>
                      <MyListbox router={router} />
                    </li>
                  </ul>
                  <div className="mt-6 border-t border-gray-200 pt-6 dark:border-gray-200/10">
                    <button
                      aria-label="Toggle Dark Mode"
                      type="button"
                      className="general-ring-state flex w-full items-center justify-center rounded-full bg-gray-200 py-3 dark:bg-neutral-700"
                      onClick={() =>
                        setTheme(resolvedTheme === `dark` ? `light` : `dark`)
                      }
                    >
                      {mounted && (
                        <>
                          <div>
                            {resolvedTheme === `dark` ? (
                              <BsSunFill size={18} />
                            ) : (
                              <BsMoonFill size={18} />
                            )}
                          </div>
                          {resolvedTheme === `dark` ? (
                            <p className="ml-3 font-semibold">
                              {t(`common:switch-theme-light`)}
                            </p>
                          ) : (
                            <p className="ml-3 font-semibold">
                              {t(`common:switch-theme-dark`)}
                            </p>
                          )}
                        </>
                      )}
                    </button>
                  </div>
                </div>
              </Transition.Child>
            </Dialog>
          </Transition>
        </div>
      </div>
    </>
  )
}