@fortawesome/free-solid-svg-icons#faLightbulb JavaScript Examples

render() {
    let icon;

    if (this.state.flashOn === true) {
      icon = (<FontAwesomeIcon icon={faLightbulb} style={{ color: 'white', fontSize: '1em'}} />);
    } else {
      icon = (<FontAwesomeIcon icon={faLightbulb} style={{ color: 'black', fontSize: '1em'}} />);
    }

    return (
      <Grid style={ styles.container }>
        <ButtonGroup >
          <Button style={styles.button} bsSize="small" bsStyle="success" onClick={this.startStream}>Start</Button>
          <Button style={styles.button} bsSize="small" bsStyle="danger" onClick={this.stopStream}>Stop</Button>
          <Button style={styles.button} bsSize="small" bsStyle="primary" onClick={this.captureStill}>Screenshot</Button>
          <Button style={{...styles.button, ...{ paddingLeft: 10, paddingRight: 10}}} bsSize="small" bsStyle="danger" onClick={this.toggleLed}>{icon}</Button>
        </ButtonGroup>
        <img style = {styles.image} src={this.state.imgSrc} alt="" />
      </Grid>
    );
  }

render() {
        const utility = this.props.utility || gameService.getUtility(this.props.position, this.props.game);
        const opened = this.state.opened;

        let canSend = false;
        let owner = false;
        if (opened) {
            const permissions = gameService.allowedToSendDeed(utility, this.props.game);
            canSend = permissions.canSend;
            owner = permissions.owner;
        }

        const mortgageClass = utility.mortgaged ? " mortgaged":"";
        return (
            <div className={"utility grid-area-"+this.props.position+" board-card " + this.props.boardPos + " " + (opened ? "opened" : "")+mortgageClass}
                 onClick={() => this.setState({opened: true})}>

                {opened && <a className="close" onClick={(e) => {
                    this.setState({opened: false});
                    e.stopPropagation();
                }}><FontAwesomeIcon icon={faTimesCircle}/></a>}

                <div className="title">{utility.title}</div>
                <div className="icon body">

                    {utility.type === 'water' && <FontAwesomeIcon icon={faFaucet}/>}
                    {utility.type === 'electricity' && <FontAwesomeIcon icon={faLightbulb}/>}
                </div>
                {opened && <div className="body">
                    {utility.description}

                    <Mortgage property={utility} isOwner={owner}  game={this.props.game} type="utilities"/>


                    <div>
                        <hr/>
                        Owned by: {gameService.getPlayerFromId(utility.owner).name}
                    </div>

                    {opened && canSend && <div className='send-street'>
                        <hr/>
                        Send to:
                        <select value={this.state.sendTo} onChange={(e) => this.setState({sendTo: e.target.value})}>
                            <option value="">Select</option>
                            {this.props.game.players.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                        </select>
                        &nbsp;
                        <button onClick={this.sendUtility}>Send !</button>
                    </div>}

                </div>}
                <div className="price">${utility.price}</div>
            </div>);
    }

// https://fontawesome.com/v5/docs/web/use-with/react

function VideoEditor() {

	//Boolean state handling whether upload has occured or not
	const [isUpload, setIsUpload] = useState(true)

	//State handling storing of the video
	const [videoUrl, setVideoUrl] = useState('')
	const [videoBlob, setVideoBlob] = useState('')

	//Boolean state handling whether light or dark mode has been chosen
	const [isDarkMode, setIsDarkMode] = useState(false)

	//Stateful array handling storage of the start and end times of videos
	const [timings, setTimings] = useState([])


	//Lifecycle handling light and dark themes
	useEffect(() => {
		toggleThemes()
		document.addEventListener('drop', function(e) {
			e.preventDefault()
			e.stopPropagation()
		})
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [])

	//Function handling file input as well as file drop library and rendering of those elements
	const renderUploader = () => {
		return (
			<div className={'wrapper'}>
				<input
					onChange={(e) => uploadFile(e.target.files)}
					type='file'
					className='hidden'
					id='up_file'
				/>
				<FileDrop
					onDrop={(e) => uploadFile(e)}
					onTargetClick={() => document.getElementById('up_file').click()}
				>
                    Click or drop your video here to edit!
				</FileDrop>
			</div>
		)
	}

	//Function handling rendering the Editor component and passing props to that child component
	const renderEditor = () => {
		return (
		// videoUrl --> URL of uploaded video
			<Editor
				videoUrl={videoUrl}
				videoBlob={videoBlob}
				setVideoUrl={setVideoUrl}
				timings={timings}
				setTimings={setTimings}
			/>
		)
	}

	//Function handling the light and dark themes logic
	const toggleThemes = () => {
		if(isDarkMode) {
			document.body.style.backgroundColor = '#1f242a'
			document.body.style.color = '#fff'
		}
		if(!isDarkMode){
			document.body.style.backgroundColor = '#fff'
			document.body.style.color = '#1f242a'
		}
		setIsDarkMode(!isDarkMode)
	}

	//Function handling the file upload file logic
	const uploadFile = async (fileInput) => {
		console.log(fileInput[0])
		let fileUrl = URL.createObjectURL(fileInput[0])
		setIsUpload(false)
		setVideoUrl(fileUrl)
		setVideoBlob(fileInput[0])
	}

	return (
		<div>
			{/* Boolean to handle whether to render the file uploader or the video editor */}
			{isUpload ? renderUploader() : renderEditor()}
			<div className={'theme_toggler'} onClick={toggleThemes}>
				{isDarkMode ?
					(<i className='toggle' aria-hidden='true'>
						<FontAwesomeIcon icon={faLightbulb} /></i>)
					:
					<i className='toggle'><FontAwesomeIcon icon={faMoon} /></i>}
			</div>
		</div>
	)
}