[ABANDONDED] Set of "apps" for the Flexor social network.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
import React, { FC, useState, useEffect } from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faEyeSlash } from '@fortawesome/free-solid-svg-icons' import { Communicator } from '../../../communicator' import '../../../styles/default.scss'
interface Props { communicator: Communicator }
const App: FC<Props> = ({ communicator }) => { const maxCharacters = 256 const [content, setContent] = useState('') const [cover, setCover] = useState('')
const charactersLeft = maxCharacters - content.length const showCharactersLeft = charactersLeft < (maxCharacters / 2) const showCharactersStyle = charactersLeft > (maxCharacters * 0.1) ? 'has-text-danger' : '' const buttonStyle = 'button is-primary is-small' + (charactersLeft < 1 ? ' is-disabled' : '')
useEffect(() => { const init = async () => { try { await communicator.setHeight(document.body.offsetHeight) } catch (err) { console.error('App Component: ', err) } } init() }, [])
return ( <div> <div className="field"> <div className="control"> <textarea className="textarea" placeholder="What it do?" value={content} onChange={(e) => setContent(e.target.value)} /> </div> </div>
<div className="field"> <p className="control has-icons-left"> <input className="input" type="text" placeholder="Cover Text" value={cover} onChange={(e) => setCover(e.target.value)} /> <span className="icon is-small is-left"> <FontAwesomeIcon icon={faEyeSlash} /> </span> </p> </div>
<nav className="level"> <div className="level-left"> <div className="level-item"> {showCharactersLeft && <p className={showCharactersStyle}>{charactersLeft} Chars Left</p>} </div> </div>
<div className="level-right"> <div className="level-item"> <button className={buttonStyle}>Post!</button> </div> </div> </nav> </div> ) }
export default App
|