const NavigationBar = () => ( <Styles> <Navbar expand="lg"> <Navbar.Brand href="/">Shoreline IoT</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav"/> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="ml-auto"> <Nav.Item><Nav.Link href="/">Notification</Nav.Link></Nav.Item> <Nav.Item><Nav.Link href="/organization">Quick Link</Nav.Link></Nav.Item> </Nav> </Navbar.Collapse> </Navbar> </Styles> )
const ListItem = (props) => { const item = props.isMobile ? ( <ListGroup.Item className={props.className}> <NavLink to={props.link} className="link"> <SVGIcon name={props.name} isMobile={true} /> </NavLink> </ListGroup.Item> ) : ( <ListGroup.Item className={props.className}> <SVGIcon name={props.name} /> <NavLink to={props.link} className="link"> <b>{props.name}</b> </NavLink> </ListGroup.Item> ); return item; }
this.state.commentList.forEach((commentItem) => { comments.push( <ListGroup.Item> <div className="comment-item"> <div className="image-container"> <Image src={userIcon2} alt="icon" rounded className="user-image" /> </div> <div className="comment-container"> <div className="commenting-user">{commentItem.userName}</div> <div className="comment-text">{commentItem.comment}</div> </div> </div> </ListGroup.Item> ); });
renderMoreAction() { const { post } = this.props; const user = this.context; if (user && user.signedIn && post.author === user.username) { return ( <Dropdown className="float-right"> <Dropdown.Toggle variant="light" id="dropdown-basic" className="btn-sm" bsPrefix> <FontAwesomeIcon icon={faEllipsisH} title="more action" /> </Dropdown.Toggle> <Dropdown.Menu> <Dropdown.Item href={`/editPost/${post._id}`}>Edit</Dropdown.Item> <Dropdown.Item onClick={this.onDelete}>Delete</Dropdown.Item> </Dropdown.Menu> </Dropdown> ); } return ''; }
const MyTopNav = ({ lessons }) => { console.log(lessons); return ( <Navbar bg="light shadow" expand="lg"> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="mr-auto"> <LinkContainer to="/"> <Nav.Link>Home</Nav.Link> </LinkContainer> <NavDropdown title={`All lessons`} id="basic-nav-dropdown"> {lessons.map(lesson => ( <LinkContainer to={`/lesson-${lesson.nr}`}> <NavDropdown.Item>lesson {lesson.nr}</NavDropdown.Item> </LinkContainer> ))} </NavDropdown> </Nav> </Navbar.Collapse> </Navbar> ); }
const PaginationManager = (props) => { const paginationItems = []; let i; for (i = 1; i <= props.pages; i++) { let n = i; paginationItems.push(<Pagination.Item key={n} onClick={() => props.handlePagination(n)}>{n}</Pagination.Item>); } return ( <div> <Pagination> {/*<Pagination.First />*/} {/*<Pagination.Prev />*/} {paginationItems} {/*<Pagination.Next />*/} {/*<Pagination.Last />*/} </Pagination> </div> ); }
renderCart() { return ( <div className="navbar-collapse collapse w-100 order-3 dual-collapse2"> <ul className="navbar-nav ml-auto"> <li className="nav-item"> <DropdownButton id="dropdown-basic-button" title={"My Cart - " + this.props.cartItems.length} variant="secondary" alignRight > {this.props.cartItems && this.props.cartItems.map(cart => { return ( <Dropdown.Item href="#/action-1" key={cart.product.id}> {cart.product.name} -{" "} <span className="badge badge-success"> {cart.quantity} </span>{" "} </Dropdown.Item> ); })} </DropdownButton> </li> </ul> </div> ); }
render() { const { searchPlaceholder, results } = this.props; const { searchText } = this.state; const listGroupItems = results.map((result, index) => <ListGroup.Item key={index} data-index={index} action onClick={this.handleSelection}>{result}</ListGroup.Item>); // let listGroupItems = []; // for (var i = 0; i < results.length; i++) { // listGroupItems.push(<ListGroup.Item>{results[i]}</ListGroup.Item>) // } return ( <div className="search-box"> <Form.Control type="text" placeholder={searchPlaceholder} value={searchText} onChange={this.handleInputChange}/> <ListGroup className="search-results"> {listGroupItems} </ListGroup> </div> ) }
const Navigation = (props) => { let navigate = props.history return ( <Navbar bg="light" expand="lg"> <Navbar.Brand onClick={() => { navigate.push("/") }}>Recipes</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="mr-auto"> <Nav.Link onClick={() => { navigate.push("signup") }}> SignUp </Nav.Link> <Nav.Link onClick={()=>{navigate.push("search")}}>Search</Nav.Link> <NavDropdown title="Dropdown" id="basic-nav-dropdown"> <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item> <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item> <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item> </NavDropdown> </Nav> </Navbar.Collapse> </Navbar> ) }
function NavigationBarComponent() { const classes = useStyles(); return ( <div className={classes.container}> <Nav className="justify-content-end " activeKey="/home"> <Nav.Item> <Nav.Link href="/" >{messages.home}</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="about">{messages.about}</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="screen">{messages.screen}</Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="contact">{messages.contact}</Nav.Link> </Nav.Item> <Nav.Item className={classes.createAccount}> <Nav.Link eventKey="contact">{messages.createAccount}</Nav.Link> </Nav.Item> </Nav> </div> ); }
render() { return ( <Navbar collapseOnSelect bg="light" expand="lg"> <Navbar.Brand href="/">React-Bootstrap</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav> <Link to="/" className="nav-link">Home</Link> <Link to="/about/" className="nav-link">About</Link> <span className="filler" /> <NavDropdown title={ <Octicon icon={Person} /> } id="basic-nav-dropdown" className="ml-auto" onSelect={function(){}} // triggers collapse when an item is clicked // eslint-disable-next-line react/jsx-closing-bracket-location > <NavDropdown.Item to="/login">Login</NavDropdown.Item> <NavDropdown.Item to="/register">Register</NavDropdown.Item> </NavDropdown> </Nav> </Navbar.Collapse> </Navbar> ); }
function Nav1() { return ( <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">Home</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="ml-auto"> <Nav.Link href="#features">Features</Nav.Link> <Nav.Link href="#pricing">Pricing</Nav.Link> <NavDropdown title="Dropdown" id="collapsible-nav-dropdown"> <NavDropdown.Item href="#action/3.1">Actions</NavDropdown.Item> <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item> <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item> </NavDropdown> <Nav.Link href="#deets">More deets</Nav.Link> <Nav.Link eventKey={2} href="#memes"> Dank memes </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ); }
function Nav1() { return ( <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">Home</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="ml-auto"> <Nav.Link href="#features">Features</Nav.Link> <Nav.Link href="#pricing">Pricing</Nav.Link> <NavDropdown title="Dropdown" id="collapsible-nav-dropdown"> <NavDropdown.Item href="#action/3.1">Actions</NavDropdown.Item> <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item> <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> <NavDropdown.Divider /> <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item> </NavDropdown> <Nav.Link href="#deets">More deets</Nav.Link> <Nav.Link eventKey={2} href="#memes"> Dank memes </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ); }