react-icons/fi#FiWind JavaScript Examples

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>
  )
}

BoardCard = (props) => {
	const card_names = {
		one,
		two,
		three,
		four,
		five,
		six,
		seven,
		eight,
		nine,
		ten,
		eleven,
		twelve,
		tt,
		zz
	}

	let img_name;

	if (Object.keys(card_names).includes(props.card_img)) {
		img_name = card_names[props.card_img]
	}

	const { state, dispatch } = useContext(store)

	const toggleAttackMode = (cardId) => {
		let isAttackMode = cardId == 0 ? false : !state.isAttackMode
		dispatch({
			type: 'SET_ATTACK_MODE',
			payload: {
				isAttackMode,
				attackingCardId: cardId,
			},
		})
	}

	/**
	 * @dev Burns the selected card on hand and refund a part of the cost as energy to the player
	 * @param {String} cardID
	 */
	const burnCardOnHand = (cardID) => {
		state.socket.emit('burn-card', {
			currentGameID: state.game.gameId,
			cardID,
			burnType: 'hand',
		})
	}

	const isGamePaused = () => state.game && state.game.gamePaused
	let isAllyCard = state.playerNumber === props.playerNumberOwner
	// If the card is ally, display the attack button or invoke, else don't display actions
	let buttonToDisplay
	if (props.isInvoked && isAllyCard) {
		buttonToDisplay = (
			<CardButton
				disabled={
					!props.canAttack ||
					state.isOtherPlayerTurn ||
					isGamePaused()
				}
				onClick={() => {
					toggleAttackMode(props.id)
				}}
			>
				Attack
			</CardButton>
		)
	} else if (isAllyCard) {
		buttonToDisplay = (
			<div>
				<CardButton
					style={{
						backgroundColor: '#ffad04',
					}}
					disabled={state.isOtherPlayerTurn || isGamePaused()}
					onClick={() => {
						burnCardOnHand(props.id)
					}}
				>
					Burn
				</CardButton>
			</div>
		)
	}

	const renderSwitch = (param) => {
		switch (param) {
			case 'wind':
				return <FiWind />;
			case 'fire':
				return <ImFire />;
			case 'water':
				return <GiDrop />;
			case 'death':
				return <GiDeathSkull />;
			case 'life':
				return <FaHeart />;
			case 'neutral':
				return <FiMinusCircle />;
			default:
				return param;
		}
	}
	return (
		<StyledCard data-id={props.dataId} card_name={img_name}>
			<div>{props.cost}<FaBolt size={18} /> </div>
			<div><span>{props.life}</span><FaHeart color={'rgba(255, 255, 255, 0.3)'} size={26} /> </div>
			<div><span>{props.attack}</span><GiBowieKnife color={'rgba(255, 255, 255, 0.3)'} size={26} /> </div>
			<div className={'card ' + props.type}>{renderSwitch(props.type)}</div>
			<div className="spacer"></div>
			{buttonToDisplay}
		</StyledCard>
	)
}