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> ); }
// 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> )
render(){ return( <Container> <h1 className="text-center">contact us</h1> <Form> <Form.Group controlId="formBasicEmail"> <Form.Label>email adress</Form.Label> <Form.Control type="email" placeholder="Enter email" /> <Form.Text> we will never share your email to someone else </Form.Text> </Form.Group> <Form.Group controlId="formBasicPassword"> <Form.Label>Example taxtarea</Form.Label> <Form.Control as="textarea" rows="3" /> </Form.Group> <Form.Group controlId="formBasicCheckBox"> <Form.Check type="checkbox" label="Check me out" /> </Form.Group> <Button variant="primary" type="submit">Submit</Button> </Form> </Container > ) }
render() { const { search } = this.state; return ( <Form onSubmit={this.handleSubmit} inline> <InputGroup> <InputGroup.Prepend> <InputGroup.Text id="basic-addon1"> <FontAwesomeIcon icon={faSearch} /> </InputGroup.Text> </InputGroup.Prepend> <FormControl type="text" placeholder="Search" className="mr-sm-2" name="search" value={search} onChange={this.handleChange} /> </InputGroup> </Form> ); }
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> ); }
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> )
render() { return ( <Modal centered={true} show={true} onHide={() => { this.props.callback(false); }}> <Modal.Header closeButton> <Modal.Title>{this.props.isBuying ? 'Buying' : 'Selling'} {this.props.currency}</Modal.Title> </Modal.Header> <Modal.Body> <InputGroup className="mb-3"> <FormControl placeholder="Enter amount" onChange={this.onInputAmountChange} maxLength={8} /> <InputGroup.Append> <InputGroup.Text> <NumberFormat value={this.state.convertedAmount} displayType={'text'} thousandSeparator={true} prefix={this.props.isBuying ? '-' : '+'} suffix={'TL'} /> </InputGroup.Text> </InputGroup.Append> </InputGroup> </Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={() => { this.props.callback(false); }}>Cancel</Button> <Button variant="success" onClick={this.handlePositive} disabled={this.state.isProcessingTransaction || isNaN(this.state.inputAmount) || this.props.currency === "TRY"}> {this.props.isBuying ? 'Buy' : 'Sell'} </Button> </Modal.Footer> </Modal> ); }
<Card.Body> <Card.Title> Types of products</Card.Title> <Card.Text> blabla description</Card.Text> <Button variant="primary">About team</Button> </Card.Body> <Card.Body> <Card.Title> Types of products</Card.Title> <Card.Text> blabla description</Card.Text> <Button variant="primary">About team</Button> </Card.Body> <Card.Body> <Card.Title> Types of products</Card.Title> <Card.Text> blabla description</Card.Text> <Button variant="primary">About team</Button> </Card.Body>
render() { return ( <div> <h1>Contact Form</h1> <Form> <Form.Group controlId="formBasicName"> <Form.Label>Your Name</Form.Label> <Form.Control onChange={this.handleNameChange} placeholder="Your name..." /> <Form.Text className="text-muted"> We'll never share your data with anyone else. </Form.Text> </Form.Group> <Form.Group controlId="formBasicSubject"> <Form.Label>Your Subject</Form.Label> <Form.Control onChange={this.handleSubjectChange} placeholder="Your subject..." /> </Form.Group> <Form.Group controlId="exampleForm.ControlTextarea1"> <Form.Label>Your Message</Form.Label> <Form.Control onChange={this.handleMessageChange} as="textarea" rows="3" placeholder="Your Message..."/> </Form.Group> <Button onClick={this.handleClick} variant="primary" type="submit">Submit</Button> </Form> </div> ) }
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> )