react-icons/fi#FiMoon TypeScript Examples

The following examples show how to use react-icons/fi#FiMoon. 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: AboutName.tsx    From mkn with MIT License 6 votes vote down vote up
AboutName: React.FC<IProps> = (props) => {
  useDarkMode();

  const { name } = useRouter()?.query;

  return (
    <PageWrapper
      className={cx(
        styles['comp-wrapper'],
        { [styles['comp-wrapper--alwaysDarkMode']]: props.alwaysDarkMode },
        `g-comp--${AboutName.displayName}`,
        props.className,
      )}
      style={props.style}
    >
      <HtmlMeta title={`${name}`} />

      <HugeIcon icon={<FiMoon />} className={styles['huge-icon']} />

      <div className={styles['params-info']}>
        <code>{name}</code>
      </div>
    </PageWrapper>
  );
}
Example #2
Source File: HeaderNavbar.tsx    From mkn with MIT License 5 votes vote down vote up
HeaderNavbar: React.FC<IProps> = (props) => {
  const { pathname, route, query } = useRouter();

  const navs = [
    { to: '/', icon: <FiTriangle />, exact: true },
    { to: '/about', icon: <FiPercent />, exact: true },
    {
      to: '/about/darkmode',
      active: '/about/[name]',
      icon: <FiMoon />,
      exact: true,
    },
  ];

  return (
    <div
      className={cx(
        styles['comp-wrapper'],
        { [styles['comp-wrapper--alwaysDarkMode']]: props.alwaysDarkMode },
        `g-comp--${HeaderNavbar.displayName}`,
        props.className,
      )}
      style={props.style}
    >
      {navs.map((nav) => (
        <Link href={nav.to} key={nav.to}>
          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
          <a
            className={cx(styles['nav-link'], {
              [styles['nav-link--active']]:
                pathname === nav.active || pathname === nav.to,
            })}
          >
            <Button type="ghost" className={styles['nav-button']}>
              {nav.icon}
            </Button>
          </a>
        </Link>
      ))}
    </div>
  );
}
Example #3
Source File: ThemeMode.tsx    From hub with Apache License 2.0 5 votes vote down vote up
ThemeMode = (props: Props) => {
  const { ctx, dispatch } = useContext(AppCtx);
  const { configured } = ctx.prefs.theme;

  const onHandleChange = (value: string) => {
    dispatch(updateTheme(value));
    if (!isUndefined(props.onSelection)) {
      props.onSelection();
    }
  };

  return (
    <>
      <SmallTitle text="Theme" className="px-4" />
      <div data-testid="themeOptions">
        <div className="dropdown-item">
          <div className="form-check">
            <input
              id={`${props.device}-automatic`}
              name="automatic"
              className={`form-check-input ${styles.input}`}
              type="radio"
              value="automatic"
              aria-checked={configured === 'automatic'}
              tabIndex={0}
              checked={configured === 'automatic'}
              onChange={() => onHandleChange('automatic')}
            />
            <label className={`form-check-label fw-bold w-100 ${styles.label}`} htmlFor={`${props.device}-automatic`}>
              <GoBrowser className={`mx-1 position-relative ${styles.icon}`} />
              Automatic
            </label>
          </div>
        </div>

        <div className="dropdown-item">
          <div className="form-check">
            <input
              id={`${props.device}-light`}
              name="light"
              className={`form-check-input ${styles.input}`}
              type="radio"
              value="light"
              aria-checked={configured === 'light'}
              tabIndex={-1}
              checked={configured === 'light'}
              onChange={() => onHandleChange('light')}
            />
            <label className={`form-check-label fw-bold w-100 ${styles.label}`} htmlFor={`${props.device}-light`}>
              <FiSun className={`mx-1 position-relative ${styles.icon}`} />
              Light
            </label>
          </div>
        </div>

        <div className="dropdown-item">
          <div className="form-check">
            <input
              id={`${props.device}-dark`}
              name="dark"
              className={`form-check-input ${styles.input}`}
              type="radio"
              value="dark"
              aria-checked={configured === 'dark'}
              tabIndex={-1}
              checked={configured === 'dark'}
              onChange={() => onHandleChange('dark')}
            />
            <label className={`form-check-label fw-bold w-100 ${styles.label}`} htmlFor={`${props.device}-dark`}>
              <FiMoon className={`mx-1 position-relative ${styles.icon}`} />
              Dark
            </label>
          </div>
        </div>
      </div>
    </>
  );
}
Example #4
Source File: WidgetModal.tsx    From hub with Apache License 2.0 5 votes vote down vote up
THEMES: WidgetTheme[] = [
  {
    name: DEFAULT_THEME,
    icon: <FiSun />,
  },
  { name: 'dark', icon: <FiMoon /> },
]
Example #5
Source File: WidgetsGroupModal.tsx    From hub with Apache License 2.0 5 votes vote down vote up
THEMES: RadioProps[] = [
  {
    name: DEFAULT_THEME,
    icon: <FiSun />,
  },
  { name: 'dark', icon: <FiMoon /> },
]
Example #6
Source File: BottomNav.tsx    From meshtastic-web with GNU General Public License v3.0 4 votes vote down vote up
BottomNav = (): JSX.Element => {
  const [showVersionInfo, setShowVersionInfo] = useState(false);
  const dispatch = useAppDispatch();
  const meshtasticState = useAppSelector((state) => state.meshtastic);
  const appState = useAppSelector((state) => state.app);
  const primaryChannelSettings = useAppSelector(
    (state) => state.meshtastic.radio.channels,
  ).find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)?.settings;
  const metrics =
    meshtasticState.nodes[meshtasticState.radio.hardware.myNodeNum]?.metrics;

  return (
    <div className="z-20 flex justify-between divide-x divide-gray-400 border-t border-gray-400 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-secondaryDark">
      <BottomNavItem tooltip="Meshtastic WebUI">
        <img
          title="Logo"
          className="my-auto w-5"
          src={appState.darkMode ? '/Logo_White.svg' : '/Logo_Black.svg'}
        />
      </BottomNavItem>

      <BottomNavItem
        tooltip="Connection Status"
        onClick={(): void => {
          dispatch(openConnectionModal());
        }}
        className={
          [
            Types.DeviceStatusEnum.DEVICE_CONNECTED,
            Types.DeviceStatusEnum.DEVICE_CONFIGURED,
          ].includes(meshtasticState.deviceStatus)
            ? 'bg-primary dark:bg-primary'
            : [
                Types.DeviceStatusEnum.DEVICE_CONNECTING,
                Types.DeviceStatusEnum.DEVICE_RECONNECTING,
                Types.DeviceStatusEnum.DEVICE_CONFIGURING,
              ].includes(meshtasticState.deviceStatus)
            ? 'bg-yellow-400 dark:bg-yellow-400'
            : ''
        }
      >
        {appState.connType === connType.BLE ? (
          <FiBluetooth className="h-4" />
        ) : appState.connType === connType.SERIAL ? (
          <FiCpu className="h-4" />
        ) : (
          <FiWifi className="h-4" />
        )}
        <div className="truncate text-xs font-medium">
          {meshtasticState.nodes.find(
            (node) =>
              node.data.num === meshtasticState.radio.hardware.myNodeNum,
          )?.data.user?.longName ?? 'Disconnected'}
        </div>
      </BottomNavItem>

      <BottomNavItem tooltip="Battery Level">
        {!metrics?.batteryLevel ? (
          <IoBatteryDeadOutline className="h-4" />
        ) : metrics?.batteryLevel > 50 ? (
          <IoBatteryFullOutline className="h-4" />
        ) : metrics?.batteryLevel > 0 ? (
          <IoBatteryFullOutline className="h-4" />
        ) : (
          <IoBatteryChargingOutline className="h-4" />
        )}

        <div className="truncate text-xs font-medium">
          {metrics?.batteryLevel
            ? `${metrics?.batteryLevel}% - ${metrics?.voltage}v`
            : 'No Battery'}
        </div>
      </BottomNavItem>

      <BottomNavItem tooltip="Network Utilization">
        <div className="m-auto h-3 w-3 rounded-full bg-primary" />
        <div className="truncate text-xs font-medium">
          {`${metrics?.airUtilTx ?? 0}% - Air`} |
        </div>

        <div
          className={`m-auto h-3 w-3 rounded-full ${
            !metrics?.channelUtilization
              ? 'bg-primary'
              : metrics?.channelUtilization > 50
              ? 'bg-red-400'
              : metrics?.channelUtilization > 24
              ? 'bg-yellow-400'
              : 'bg-primary'
          }`}
        />
        <div className="truncate text-xs font-medium">
          {`${metrics?.channelUtilization ?? 0}% - Ch`}
        </div>
      </BottomNavItem>

      <BottomNavItem tooltip="MQTT Status">
        {primaryChannelSettings?.uplinkEnabled &&
        primaryChannelSettings?.downlinkEnabled &&
        !meshtasticState.radio.moduleConfig.mqtt.disabled ? (
          <RiArrowUpDownLine className="h-4" />
        ) : primaryChannelSettings?.uplinkEnabled &&
          !meshtasticState.radio.moduleConfig.mqtt.disabled ? (
          <RiArrowUpLine className="h-4" />
        ) : primaryChannelSettings?.downlinkEnabled &&
          !meshtasticState.radio.moduleConfig.mqtt.disabled ? (
          <RiArrowDownLine className="h-4" />
        ) : (
          <FiX className="h-4" />
        )}
      </BottomNavItem>

      <div className="flex-grow">
        <BottomNavItem
          onClick={(): void => {
            dispatch(toggleMobileNav());
          }}
          className="md:hidden"
        >
          {appState.mobileNavOpen ? (
            <FiX className="m-auto h-4" />
          ) : (
            <FiMenu className="m-auto h-4" />
          )}
        </BottomNavItem>
      </div>

      <BottomNavItem
        tooltip={
          appState.updateAvaliable ? 'Update Avaliable' : 'Current Commit'
        }
        onClick={(): void => {
          setShowVersionInfo(true);
        }}
        className={appState.updateAvaliable ? 'animate-pulse' : ''}
      >
        {appState.updateAvaliable ? (
          <MdUpgrade className="h-4" />
        ) : (
          <FiGitBranch className="h-4" />
        )}
        <p className="text-xs opacity-60">{process.env.COMMIT_HASH}</p>
      </BottomNavItem>

      <BottomNavItem
        tooltip="Toggle Theme"
        onClick={(): void => {
          dispatch(setDarkModeEnabled(!appState.darkMode));
        }}
      >
        {appState.darkMode ? (
          <FiSun className="h-4" />
        ) : (
          <FiMoon className="h-4" />
        )}
      </BottomNavItem>

      <VersionInfo
        modalOpen={showVersionInfo}
        onClose={(): void => {
          setShowVersionInfo(false);
        }}
      />
    </div>
  );
}