react-icons/fi#FiSun JavaScript Examples

The following examples show how to use react-icons/fi#FiSun. 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: theme-switcher.js    From velocitypowered.com with MIT License 6 votes vote down vote up 
export default function ThemeSwitcher({ themeName, setThemeName }) {
  if (typeof themeName === 'undefined') return null
  const checked = themeName === "light"

  function flipTheme() {
    if (themeName === "light") {
      setThemeName("dark")
    } else {
      setThemeName("light")
    }
  }

  return <div>
    <Switch onChange={flipTheme}
            checked={checked}
            offColor={"#222"}
            onColor={"#fff"}
            onHandleColor={"#0288d1"}
            offHandleColor={"#0288d1"}
            uncheckedIcon={
              <FiMoon css={iconCommonCss} />
            }
            checkedIcon={
              <FiSun css={iconCommonCss} color={"#222"} />
            }
            role="switch"
            aria-checked={String(checked)}
            aria-label={checked ? "Toggle dark theme" : "Toggle light theme"}
    />
  </div>
}
Example #2
Source File: index.js    From chat-e2ee with Apache License 2.0 6 votes vote down vote up 
ThemeToggle = () => {
  const [darkMode, setDarkMode] = useContext(ThemeContext);

  const toggleTheme = () => {
    storage.set('theme', !darkMode);
    setDarkMode(!darkMode);
  };

  return (
    <span className={styles.toggleIcon}>
      {darkMode === true ? (
        <FiSun className={styles.FiSun} onClick={toggleTheme} />
      ) : (
        <FiMoon className={styles.FiMoon} onClick={toggleTheme} />
      )}
    </span>
  );
}
Example #3
Source File: Weather.jsx    From 4IZ268-2021-2022-ZS with MIT License 5 votes vote down vote up 
function Weather() {
  const [info, setInfo] = useState([])
  const [icon, setIcon] = useState('')
  const [error, setError] = useState(null)
  const [isLoaded, setIsLoaded] = useState(false)

  useEffect(() => {
    fetch(WEATHER_INFO)
      .then((res) => res.json())
      .then(
        (result) => {
          setInfo(result)
          setIcon(parseIcon(result.weather[0].icon))
          setIsLoaded(true)
        },
        (error) => {
          setIsLoaded(true)
          setError(error)
        }
      )
  }, [])

  function parseIcon(input) {
    const iconId = input.slice(0, 2)
    return iconId
  }

  if (error) {
    return <div>Error: {error.message}</div>
  } else if (!isLoaded) {
    return (
      <div className='pr-4 pt-3 pb-16 pl-28 opacity-0'>
        <p className='h-14'>Loading...</p>
      </div>
    )
  }

  return (
    <div className='group pr-4 pt-3 pb-16 pl-28 opacity-70 hover:opacity-90 transition-opacity'>
      <div className='flex items-center gap-x-2'>
        {icon === '01' && <FiSun size='2em' />}
        {(icon === '02' || icon === '03' || icon === '04') && (
          <FiCloud size='2em' />
        )}
        {icon === '09' && <FiCloudDrizzle size='2em' />}
        {icon === '10' && <FiCloudRain size='2em' />}
        {icon === '11' && <FiCloudLightning size='2em' />}
        {icon === '13' && <FiCloudSnow size='2em' />}
        {icon === '50' && <FiWind size='2em' />}

        <p className='font-medium text-2xl'>{Math.round(info.main.temp)} °C</p>
      </div>
      <p className='text-center opacity-80'>{info.name}</p>
    </div>
  )
}
Example #4
Source File: Nav.js    From winstall with GNU General Public License v3.0 4 votes vote down vote up 
function Nav() {
  const router = useRouter();
  const [ddShown, setDDShown] = useState(false);
  const navRef = useRef(null);

  let handleClickOut = (e) => {
    if (navRef.current && !navRef.current.contains(e.target)) {
      setDDShown(false);
      navRef.current.classList.remove("shown");
    }

    if (navRef.current && navRef.current.contains(e.target)) {
      setDDShown(false);
      setTimeout(() => {
        navRef.current.classList.remove("shown");
      }, 200);
    }
  };

  useEffect(() => {
    window.addEventListener("mousedown", handleClickOut);

    // cleanup this component
    return () => {
      window.removeEventListener("mousedown", handleClickOut);
    };
  }, []);

  let switchTheme = () => {
    let body = document.querySelector("body");

    if (body.classList.contains("light")) {
      localStorage.setItem("wiTheme", "dark");
      body.classList.replace("light", "dark");
    } else {
      localStorage.setItem("wiTheme", "light");
      body.classList.replace("dark", "light");
    }
  };

  const toggleDD = () => {
    if (ddShown) {
      navRef.current.classList.remove("shown");
    } else {
      navRef.current.classList.add("shown");
    }

    setDDShown(!ddShown);
  };

  return (
    <header>
      <div className={styles.brand}>
        <Link href="/">
          <a>winstall</a>
        </Link>
        {/* <span className="preview">&nbsp;(preview)</span> */}
      </div>

      <div className={styles.nav} ref={navRef}>
        <Link href="/apps">
          <a>
            <FiPackage />
            <p>Apps</p>
          </a>
        </Link>
        <Link href="/packs">
          <a>
            <FiGrid />
            <p>Packs</p>
          </a>
        </Link>
        <a
          href="https://ko-fi.com/mehedi"
          target="_blank"
          rel="noopener noreferrer"
          className={styles.justIcon}
        >
          <FiHeart />
          <p className={styles.ddOnly}>Support winstall</p>
        </a>
        <span onClick={switchTheme} className={styles.justIcon}>
          <FiMoon className="moon" />
          <FiSun className="sun" />
          <p className={styles.ddOnly}>Switch theme</p>
        </span>
        <User />
      </div>

      <span className={`mobileDD ${styles.dropdown}`} onClick={toggleDD}>
        {ddShown ? <FiX /> : <FiChevronDown />}
      </span>
    </header>
  );
}
Example #5
Source File: Header.jsx    From nextjs-prismic-blog-starter with MIT License 4 votes vote down vote up 
Header = () => {
  const {theme, colorMode, setColorMode} = useThemeUI()

  return (
    <Headroom disableInlineStyles upTolerance={10} downTolerance={10}>
      <header style={{background: `${theme.colors.muted}`}} className='header'>
        <div className='header-content'>
          <div>
            <Styled.h1 style={{margin: '0'}}>
              <NextLink href='/' passHref>
                <Styled.a
                  style={{
                    textDecoration: 'none',
                    fontFamily: 'Damion',
                    letterSpacing: '0.15rem',
                  }}
                  onClick={() =>
                    trackGAEvent('logo', `clicked on site logo`, 'link click')
                  }
                  rel='noreferrer noopener'>
                  Blog
                </Styled.a>
              </NextLink>
            </Styled.h1>
          </div>
          <div className='header-links'>
            {/* <Styled.h2 style={{ margin: "0 1rem" }}>
              <Styled.a as={Link} to="/">
                Tags
              </Styled.a>
            </Styled.h2> */}
            {/* <p>
              <GoSearch
                title="Search"
                style={{
                  fontSize: "1.2rem",
                  verticalAlign: "middle",
                  marginTop: "0.2rem",
                }}
              />
            </p> */}
            <p>
              {colorMode === 'light' ? (
                <span
                  title='Switch to Dark Mode'
                  aria-label='Switch to Dark Mode'>
                  <FiSun
                    className='theme-icon'
                    onClick={() => {
                      setColorMode('dark')
                      trackGAEvent(
                        'toggle theme',
                        `enabled dark theme`,
                        'icon click'
                      )
                    }}
                  />
                </span>
              ) : (
                <span
                  title='Switch to Light Mode'
                  aria-label='Switch to Light Mode'>
                  <FiMoon
                    className='theme-icon'
                    onClick={() => {
                      setColorMode('light')
                      trackGAEvent(
                        'toggle theme',
                        `enabled light theme`,
                        'icon click'
                      )
                    }}
                  />
                </span>
              )}
            </p>
          </div>
        </div>
      </header>
    </Headroom>
  )
}