const Device = (props) => ( <GridWrapper> <Card style={{ width: '18rem' }}> <Card.Body> <Card.Title>Device 1</Card.Title> <Card.Text> Device is online. </Card.Text> </Card.Body> </Card> <Card style={{ width: '18rem' }}> <Card.Body> <Card.Title>Device 2</Card.Title> <Card.Text> Device is offline. </Card.Text> </Card.Body> </Card> </GridWrapper> )
// Cada película que aparece en el home const MoviePreview = props => ( <div className="card"> <Card.Img variant="top" alt={props.movie.title} src={ props.movie.poster_path ? `https://image.tmdb.org/t/p/w500${props.movie.poster_path}` : '/default-movie.jpg' } /> <Card.Body> <Card.Title className="card-text">{props.movie.title}</Card.Title> <Card.Text className="card-text"> {props.movie.release_date} </Card.Text> <Link to={`/movie/${props.movie.id}`} className="to-bottom btn btn-dark btn-block">Visit</Link> </Card.Body> </div> )
const CustomModal = (props) => { return ( <Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered onHide={props.onHide} > <Modal.Header closeButton> <Modal.Title id="contained-modal-title-vcenter"> {props.vals.type} </Modal.Title> </Modal.Header> <Modal.Body> <h4>{props.vals.header}</h4> <p> {props.vals.desc} </p> </Modal.Body> <Modal.Footer> <Button onClick={props.onHide}>Cancel</Button> <Button variant="danger" onClick={props[props.vals.secondary]}> {props.vals.header} </Button> </Modal.Footer> </Modal> ) }
render() { return ( <Card style={{ width: '90vw', margin: '0 auto', marginTop:'30px' }}> <Card.Body> <Card.Title>Users</Card.Title> <Table striped bordered hover> <thead> <tr> <td>Username</td> <td># likes</td> { this.props.loginState.loggedIn && <td></td> } </tr> </thead> <tbody> {this.props.state.users.map((value, index) => { return <User key={index} likeUser={this.props.likeUser} unlikeUser={this.props.unlikeUser} user={value} appState={this.props.loginState} profileState={this.props.profileState}></User> })} </tbody> </Table> {this.props.state.error && <div>Error while fetching users.</div>} {this.props.state.loading && <div>Loading users...</div>} </Card.Body> </Card> ); }
render() { const { post } = this.props; const linkTo = `/post/${post._id}`; return ( <Col lg={4} className="py-2"> <Card className="h-100"> <Card.Body> <Card.Title> {post.author} </Card.Title> <Link to={linkTo}> <Card.Text className="mb-2 text-muted">{post.title}</Card.Text> </Link> </Card.Body> <Card.Footer> <small> Posted{' '}<TimeAgo date={post.createdOn.toLocaleString()} /> </small> {this.renderMoreAction()} </Card.Footer> </Card> </Col> ); }
/* ** There is an issue here: ** Since the state is saved to the store instantly, when popup is used with animations, it's fading away slowly ** and we can see its default state while it is in animation state. I tried to stop the animation by setting animation property to false, ** i.e. animation={false}, but then popup is overlayed to the screen and screen went black. ** https://github.com/react-bootstrap/react-bootstrap/issues/3399 */ render() { return ( <Modal show={this.props.show} onHide={this.props.onClose}> <Modal.Header closeButton> <Modal.Title>{this.props.titleEnum == 0 ? "Error" : this.props.titleEnum == 1 ? "Warning" : "Success"}</Modal.Title> </Modal.Header> <Modal.Body>{this.props.message}</Modal.Body> <Modal.Footer> {this.props.callback ? <Button variant="secondary" onClick={this.props.onClose}>No</Button> : null} <Button variant="primary" onClick={this.onCloseDialog}>{this.props.callback ? 'Yes' : 'Okay'}</Button> </Modal.Footer> </Modal> ); }
const Component1 = () => { return ( <Card style={{ width: '18rem' }}> <Card.Img variant="top" src="../slike/slika_primjer1.jpg" /> <Card.Body> <Card.Title>Card Title</Card.Title> <Card.Text> Some quick example text to build on the card title and make up the bulk of the card's content. </Card.Text> <Button variant="primary">Go somewhere</Button> </Card.Body> </Card> ); }
const TipsNTricks = (props) => { return ( <Col> <Col> <h1 className="h1dr">Tips & Tricks</h1> </Col> <Col style={{ marginTop: '38px'}} > <Card> <Card.Body>{props.tip}</Card.Body> </Card> </Col> <Col style={{ marginTop: '38px'}} > <Card.Title className="h1dr">Sample Get Request </Card.Title> <Card> <Card.Body>http://localhost:7080/mocktail/your-endpoint</Card.Body> </Card> </Col> </Col> ) }
function DownloadModal() { return ( <DownloadContext.Consumer> { ({modalShow, showToggleModal, activeItem}) => ( <Modal show={modalShow} onHide={showToggleModal} size="lg" aria-labelledby="contained-modal-title-vcenter" centered > <Modal.Header closeButton> <Modal.Title>{activeItem.title}</Modal.Title> </Modal.Header> <Modal.Body> <p>Важно указывайть действительный e-mail адрес, так как на него придёт ссылка!</p> <DownloadForm /> </Modal.Body> </Modal> ) } </DownloadContext.Consumer> ); }
render() { const { show, onHide } = this.props return ( <Modal show={show} onHide={onHide} aria-labelledby="contained-modal-title-vcenter" centered > <Modal.Header closeButton> <Modal.Title className="delete_project_title"> Delete This Project </Modal.Title> </Modal.Header> <Modal.Body> <p className="danger__text">This will permanently delete the project from the platform?</p> </Modal.Body> <Modal.Footer style={{ display: "flex", justifyContent: "flex-start"}} > <Button variant="danger" onClick={this.onRemove}>Remove</Button> <Button variant="light" onClick={onHide}>Keep It</Button> </Modal.Footer> </Modal> ); }
render(){ return ( <Modal {...this.props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered> <div className="container"> <Modal.Header closeButton className="heading border border-0 p-0"> <Modal.Title id="contained-modal-title-vcenter"> <div className="title">Jitsi-Meet Codeuino</div> </Modal.Title> </Modal.Header> <Modal.Body> <Row className="display2"><JitsiMeetComponent user={this.props.user} roomID={this.props.roomID}/></Row> </Modal.Body> </div> </Modal> ); }
const TipsNTricks = (props) => { return ( <Col> <Col> <h1 className="h1dr">Tips & Tricks</h1> </Col> <Col style={{ marginTop: '38px'}} > <Card> <Card.Body>{props.tip}</Card.Body> </Card> </Col> <Col style={{ marginTop: '38px'}} > <Card.Title className="h1dr">Sample Get Request </Card.Title> <Card> <Card.Body>http://localhost:7080/mocktail/your-endpoint</Card.Body> </Card> </Col> </Col> ) }
const Organization = () => ( <GridWrapper> <Card style={{ width: '18rem' }}> <Card.Body> <Card.Title>Org 1</Card.Title> <Card.Text> USA </Card.Text> </Card.Body> </Card> <Card style={{ width: '18rem' }}> <Card.Body> <Card.Title>Org 2</Card.Title> <Card.Text> India </Card.Text> </Card.Body> </Card> </GridWrapper> )