react-bootstrap#Navbar JavaScript Examples
The following examples show how to use
react-bootstrap#Navbar.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: usage-header.js From stacker.news with MIT License | 6 votes |
|
export function UsageHeader () {
const router = useRouter()
return (
<Navbar className='pt-0'>
<Nav
className={`${styles.navbarNav} justify-content-around`}
activeKey={router.asPath}
>
<Nav.Item>
<Link href='/users/week' passHref>
<Nav.Link
className={styles.navLink}
>
week
</Nav.Link>
</Link>
</Nav.Item>
<Nav.Item>
<Link href='/users/forever' passHref>
<Nav.Link
className={styles.navLink}
>
forever
</Nav.Link>
</Link>
</Nav.Item>
</Nav>
</Navbar>
)
}
Example #2
| Source File: Navbar.js From tclone with MIT License | 6 votes |
|
render() {
return (
<Navbar bg="white" sticky="top" className="py-1 border" style={{ zIndex: 10000 }}>
<Container>
<Navbar.Brand as={Link} className="btn btn-naked-primary rounded-circle text-primary" to="/">
<img className="rounded-circle" height="45" width="45" src="/android-chrome-192x192.png" alt="logo" />
{/* <FontAwesomeIcon size="lg" icon={faTwitter} /> */}
</Navbar.Brand>
<Search className="form-inline w-100" />
<Row className="ml-auto d-none d-lg-flex justify-content-end w-50">
<Link to="/login" className="btn btn-outline-primary rounded-pill px-3 py-2 font-weight-bold">Log in</Link>
<Link to="/signup" className="btn btn-primary rounded-pill px-3 py-2 font-weight-bold ml-2">Sign up</Link>
</Row>
</Container>
</Navbar>
)
}
Example #3
| Source File: SiteNavbar.js From kiitfossosh.github.io with Creative Commons Attribution 4.0 International | 6 votes |
|
SiteNavbar = () => {
return (
<NavbarContainer>
<Navbar
expand="lg"
style={{ backgroundColor: "#14213D" }}
variant="dark"
fixed="top"
>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link active onClick={() => scrollTo("#home")}>
Home
</Nav.Link>
<Nav.Link active onClick={() => scrollTo("#aboutus")}>
About Us
</Nav.Link>
<Nav.Link active onClick={() => scrollTo("#contributors")}>
Contributors
</Nav.Link>
<Nav.Link active onClick={() => scrollTo("#joinus")}>
Join Us
</Nav.Link>
<Nav.Link active onClick={() => scrollTo("#footer")}>
Contact
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</NavbarContainer>
)
}
Example #4
| Source File: Navbar.js From orca-ui with Apache License 2.0 | 6 votes |
|
render() {
return (
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="/">
<img src={logo} className="navbar-logo" alt="logo" />
OpenRCA
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/graph">Graph</Nav.Link>
<Nav.Link href="/alerts">
Alerts
<Badge className="alertBadge" variant="danger" pill>{this.state.alertCount ? this.state.alertCount : null}</Badge>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
Example #5
| Source File: Header.jsx From document-layout-analysis-app with MIT License | 6 votes |
|
render() {
return (
<div>
{/* <Navbar expand='lg' style={{backgroundColor: '#fff3e0'}}> */}
<Navbar expand='lg' bg='info' fixed="top" className='shadow-lg'>
<Container>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Brand className='logo text-light'>Document Layout Analysis</Navbar.Brand>
<Navbar.Text className='logo text-light'>
v0.1
</Navbar.Text>
</Container>
</Navbar>
</div>
)
}
Example #6
| Source File: Header.js From mern_library_nginx with MIT License | 6 votes |
|
Header = () => {
return (
<header>
<Navbar bg="primary" expand="lg" variant="dark" collapseOnSelect>
<Container>
<LinkContainer to="/">
<Navbar.Brand>My Library</Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<LinkContainer to="/books">
<Nav.Link>
<i className="fas fa-book" /> My Books
</Nav.Link>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</header>
);
}
Example #7
| Source File: NavComp.js From Girscript-Community-Website with MIT License | 6 votes |
|
NavComp = () =>{
return(
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">
<a className="navbar-brand" href="#">
<img src={Logo} alt="logo" className="image" />
</a>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav className="nav-link">About</Nav>
<Nav className="nav-link">Event</Nav>
<Nav className="nav-link">Program</Nav>
<Nav className="nav-link">Contact</Nav>
<Nav className="nav-link">Login</Nav>
</Nav>
<div className="mob-show">
<div><a href="#" className="button">Donate Now</a></div>
<div><a href="#" className="button">Join Us</a></div>
</div>
</Navbar.Collapse>
</Navbar>
);
}
Example #8
| Source File: HeaderNav.jsx From irisql with MIT License | 6 votes |
|
HeaderNav = () => (
<Navbar bg="dark" variant="dark">
<Navbar.Brand>
<HashLink smooth to="/#home">
<img src={logoImg} style={{ height: 30 }} alt="IrisQL logo" />
</HashLink>
</Navbar.Brand>
<Nav className="d-flex justify-content-around" style={{ width: 200 }}>
<HashLink smooth to="/#features" style={{ color: 'grey' }}>Features</HashLink>
<HashLink smooth to="/#demo" style={{ color: 'grey' }}>Demo</HashLink>
<HashLink smooth to="/#team" style={{ color: 'grey' }}>Team</HashLink>
</Nav>
<Nav className="ml-auto">
<Navbar.Brand href="https://github.com/oslabs-beta/irisql" target="_blank"><img src={githubLogo} style={{ width: 25 }} alt="GitHub logo" /></Navbar.Brand>
</Nav>
</Navbar>
)
Example #9
| Source File: Nav.js From fifa with GNU General Public License v3.0 | 6 votes |
|
render() {
const { theme } = this.context;
return (
<Navbar variant="dark" style={{ background: theme.useFluentDesign ? theme.acrylicTexture80.background : 'none' }}>
<Navbar.Brand href="/">
<img src={logo} width="30" height="30" className="d-inline-block align-top" alt="logo" /> Fifa.io
</Navbar.Brand>
<this.loginStatus />
</Navbar>
);
}
Example #10
| Source File: index.js From Webiu with MIT License | 6 votes |
|
NavBar = ({logo, links = [], logoStyle}) => {
return (
<div className="nav-bar-component ">
<Navbar className="nav-bar-custom" expand="lg">
<div className="logo-container" style={logoStyle}>
<a href="/">
<img className="logo" src={logo} alt="logo"/>
</a>
</div>
<Navbar.Toggle aria-controls="basic-navbar-nav" className="toggle"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="justify-content-end" style={{width: "100%"}}>
{links.map((link) => !link.isExternal ? (
<Nav.Link
key={link.path}
to={link.path}
className={link.isSpecial ? "special" : ""}
style={{backgroundColor: null}}
>
{link.name}
</Nav.Link>
) : (
<Nav.Link
href={link.path}
target="_blank"
className={link.isSpecial ? "special" : ""}
>
{link.name} <FontAwesomeIcon icon={faExternalLinkAlt} className="nav-icon"/>
</Nav.Link>
))}
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
Example #11
| Source File: header.js From LearningJAMStack_microCMS_template with MIT License | 6 votes |
|
Header = ({ siteTitle }) => (
<Navbar bg="light" variant="light" expand="lg">
<Navbar.Brand as={Link} href="/">
{siteTitle}
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<NavItem href="/about">
<Nav.Link as={Link} activeClassName="active" to="/about">
会社概要
</Nav.Link>
</NavItem>
<NavItem href="/about">
<Nav.Link as={Link} activeClassName="active" to="/jigyo">
事業内容
</Nav.Link>
</NavItem>
<NavItem href="/about">
<Nav.Link as={Link} activeClassName="active" to="/information">
インフォメーション
</Nav.Link>
</NavItem>
<NavItem href="/about">
<Nav.Link as={Link} activeClassName="active" to="/contact">
お問い合わせ
</Nav.Link>
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)
Example #12
| Source File: header.js From LearningJAMStack_Gatsby with MIT License | 6 votes |
|
Header = ({ siteTitle }) => (
<Navbar bg="light" variant="light" expand="lg">
<Navbar.Brand as={Link} href="/">
{siteTitle}
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<NavItem href="/about">
<Nav.Link as={Link} activeClassName="active" to="/about">
会社概要
</Nav.Link>
</NavItem>
<NavItem href="/about">
<Nav.Link as={Link} activeClassName="active" to="/jigyo">
事業内容
</Nav.Link>
</NavItem>
<NavItem href="/about">
<Nav.Link as={Link} activeClassName="active" to="/information">
インフォメーション
</Nav.Link>
</NavItem>
<NavItem href="/about">
<Nav.Link as={Link} activeClassName="active" to="/contact">
お問い合わせ
</Nav.Link>
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)
Example #13
| Source File: topheader.js From SpotifyParty with MIT License | 6 votes |
|
render(){
return (
<Navbar className="topheader" expand="lg">
<Navbar.Brand className="brandLogo" href="/"><img className="logo" alt="logo" src={logo}/></Navbar.Brand>
<Navbar.Toggle bg="light" aria-controls="basic-navbar-nav" />
<Navbar.Collapse bg="light" id="basic-navbar-nav">
<Nav className="mr-auto">
</Nav>
{ (this.state.user === '') ?
<Nav className="ml-auto logintag">
<Nav.Link className="topheader unique white" href={`/login/${this.state.userid}`}>Login with Spotify</Nav.Link>
</Nav>
:
<Nav bg="light" className="ml-auto">
<NavDropdown alignRight className="myaccountTag" title="My Account" id="dropdown-menu-align-right">
<NavDropdown.Item className="white">Hello, {this.state.user}</NavDropdown.Item>
{ this.state.devicename === null ?
<div className="text-center"><NavDropdown.Item className="white">Device name: [No active device]</NavDropdown.Item>
<button onClick={this.handleScanDeviceClick} className="btn btn-success ">Scan devices</button></div>
:
<NavDropdown.Item className="white">Device name: {this.state.devicename}</NavDropdown.Item>
}
<NavDropdown.Divider />
<NavDropdown.Item className="white" onClick={this.toggleLogOut} href="/">Log out</NavDropdown.Item>
</NavDropdown>
</Nav>
}
</Navbar.Collapse>
</Navbar>
);
}
Example #14
| Source File: notifications.js From stacker.news with MIT License | 6 votes |
|
export function NotificationHeader () {
const router = useRouter()
return (
<Navbar className='py-0'>
<Nav
className={`${styles.navbarNav} justify-content-around`}
activeKey={router.asPath}
>
<Nav.Item>
<Link href='/notifications' passHref>
<Nav.Link
className={styles.navLink}
>
all
</Nav.Link>
</Link>
</Nav.Item>
<Nav.Item>
<Link href='/notifications?inc=replies' passHref>
<Nav.Link
className={styles.navLink}
>
replies
</Nav.Link>
</Link>
</Nav.Item>
</Nav>
</Navbar>
)
}
Example #15
| Source File: navBar.js From xpub-tool with MIT License | 6 votes |
|
CustomNavbar = () => {
return (
<>
<Navbar variant="dark" expand="lg" id="site-navbar">
<Link to="/" className="link-no-style">
<Navbar.Brand as="span">Address Derivation</Navbar.Brand>
</Link>
<Link to="/hww" className="link-no-style">
<Navbar.Brand as="span">HW Wallets</Navbar.Brand>
</Link>
</Navbar>
</>
)
}
Example #16
| Source File: Header.js From aws-workshop-colony with Apache License 2.0 | 6 votes |
|
Header = () => (
<Navbar inverse collapseOnSelect staticTop={true}>
<div style={navbarStyle}>
<Navbar.Header style={headerStyle}>
<Navbar.Brand>
<Link to="/" style={promoManagerStyle}>
PROMO MANAGER
</Link>
</Navbar.Brand>
<NavigationControl />
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<LoginControl />
</Nav>
</Navbar.Collapse>
</div>
</Navbar>
)
Example #17
| Source File: editorbanner.js From turqV2 with GNU General Public License v3.0 | 6 votes |
|
Header = ({isAuthenticated, logout}) => (
<Navbar bg="light" expand="lg">
<Navbar.Brand>
<Link to="/">
<Logo />
</Link>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav float-right">
<Nav className="mr-auto">
<NavLink className="nav-link" activeClassName="header-active" to="/sponsor"> Create Contest </NavLink>
<NavLink className="nav-link" activeClassName="header-active" to="/contest"> Explore Contests </NavLink>
</Nav>
<Nav className="ml-auto mr-3">
<NavLink className="nav-link" activeClassName="header-active" to="/drafter">Drafting Guidelines</NavLink>
<NavLink className="nav-link" activeClassName="header-active" to="/about">About</NavLink>
{isAuthenticated
?<NavLink href="#" className="nav-link" activeClassName="header-active" to="/login"onClick={() => logout()}>Logout</NavLink>
:<NavLink className="nav-link" activeClassName="header-active" to="/login">Login</NavLink>
}
</Nav>
</Navbar.Collapse>
</Navbar>
)
Example #18
| Source File: index.js From wedding-planner with MIT License | 6 votes |
|
/**
* Navbar Component using {Link}
*/
function NavigationBar() {
const { isAuthenticated } = useAuth0();
return (
<Navbar bg="light" shadow="lg" expand="lg">
<Navbar.Brand href="/">
<Image src={logo} className="custom-img" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbar-nav" />
<Navbar.Collapse>
{isAuthenticated ? (
<Nav className="ml-auto color-link">
<NavDropdown title="Events" id="basic-nav-dropdown">
<NavDropdown.Item href="/events">
Your Events
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/events/new">
Create New
</NavDropdown.Item>
</NavDropdown>
<ProfileLink />
<LogoutLink />
</Nav>
) : (
<Nav className="ml-auto color-link">
<LoginLink />
<SignupLink />
</Nav>
)}
</Navbar.Collapse>
</Navbar>
);
}
Example #19
| Source File: header.js From turqV2 with GNU General Public License v3.0 | 6 votes |
|
function EditorHeader ({onSubmit}) {
let history = useHistory();
return (
<Navbar bg="light" expand="lg">
<Navbar.Collapse id="basic-navbar-nav float-right">
<Nav className="mr-auto ml-1">
<Nav.Link onClick={() => history.goBack()}> « Back</Nav.Link>
</Nav>
<Navbar.Brand>
<Link to="/">
<Logo />
</Link>
</Navbar.Brand>
<Nav className="ml-auto mr-1">
<Button
variant="contained"
color="primary"
onClick={onSubmit}
>
Save
</Button>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
Example #20
| Source File: Navigation.js From Cross-woc with MIT License | 6 votes |
|
function Navigation() {
return (
<>
<Navbar className='nav-container' collpseOnSelect fixed='top' expand='sm' variant='dark'>
<Container>
<Navbar.Brand className='logo' href="/">CrossWoc</Navbar.Brand>
<Navbar.Toggle aria-controls='responsive-navbar-nav' />
<Navbar.Collapse id='responsive-navbar-nav' className='justify-content-end'>
<Nav className='navbar'>
<Nav.Link href='/about'>ABOUT</Nav.Link>
<Nav.Link href='/schedule'>SCHEDULE</Nav.Link>
<Nav.Link href='/project'>PROJECTS</Nav.Link>
<Nav.Link href='/leaderboard'>LEADERBOARD</Nav.Link>
<Nav.Link href='#sponsors'>SPONSORS</Nav.Link>
<Nav.Link href='/faq'>FAQ</Nav.Link>
<Nav.Link href='/team'>TEAM</Nav.Link> <Nav.Link href='#contact'>CONTACT</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<br></br>
<br></br>
</>
)
}
Example #21
| Source File: App.js From ms-identity-javascript-react-spa-dotnetcore-webapi-obo with MIT License | 6 votes |
|
render() {
return (
<div className="app">
<Navbar className="navbar" bg="dark" variant="dark">
<Navbar.Brand href="/">Microsoft identity platform</Navbar.Brand>
<Nav className="mr-auto">
</Nav>
{
this.props.isAuthenticated ?
<Button variant="info" onClick={this.handleSignOut}>Logout</Button>
:
<Button variant="outline-info" onClick={this.handleSignIn}>Login</Button>
}
</Navbar>
{
this.props.isAuthenticated ?
<ProfileContainer
acquireToken={this.props.acquireToken}
updateToken={this.props.updateToken}
/>
:
<Jumbotron className="welcome">
<h1>Azure AD On-Behalf-Of Flow</h1>
<p>A React & Redux single-page application authorizing an ASP.NET Core web API
to call the Microsoft Graph API on-behalf-of a user via Microsoft Graph SDK.</p>
<Button variant="primary"
onClick={() => window.open("https://docs.microsoft.com/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow", "_blank")}
>Learn More</Button>
</Jumbotron>
}
</div>
);
}
Example #22
| Source File: layout.js From react-simple-boilerplate with MIT License | 6 votes |
|
function Layout({ children }) {
return (
<div className='w-100 h-100 d-flex flex-column'>
<Navbar bg="light" expand="lg">
<Link href="/" passHref>
<Navbar.Brand>React Simple Boilerplate</Navbar.Brand>
</Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Link href="/docs" passHref>
<Nav.Link>Docs</Nav.Link>
</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<div className='flex-grow-1 position-relative'>
<div className='w-100 h-100 position-absolute d-flex flex-column overflow-auto'>
{children}
</div>
</div>
</div>
)
}
Example #23
| Source File: header.js From create-sas-app with Apache License 2.0 | 6 votes |
|
render() {
return (<Navbar expand="lg" className={'header'}>
<Navbar.Brand><img src={LogoImg} alt={'logo'} onClick={() => {
this.props.history.push('/')
}}/></Navbar.Brand>
{this.props.update ?
<Button variant={'danger'} className={'mr-3'} onClick={() => window.location.reload()}>New update
available </Button> : null}
{this.props.offline &&
<span className={'mr-4'}><i className={'fas fa-exclamation-triangle mr-3'}/>Application is offline</span>}
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<div className={'info-block'}>
<LoadingIndicator/>
<UserInfoDropDown/>
</div>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
Example #24
| Source File: NavBar.js From AlgoEz with MIT License | 6 votes |
|
NavBar = () => {
return (
<Navbar bg="dark" variant="dark">
<Navbar.Toggle />
<Navbar.Collapse className="justify-content-center">
<Nav>
<Navbar.Brand>ALGO-EASY</Navbar.Brand>
{/* <Nav.Link href="/">Place Start !</Nav.Link>
<Nav.Link href="/">Place Target !</Nav.Link>
<Nav.Link href="/">Place Target !</Nav.Link>
<Nav.Link href="/">Place Target !</Nav.Link>
<NavDropdown title="Path Finding Algorithms" id="basic-nav-dropdown">
<NavDropdown.Item href="/PathGrid/PathGrid">Dijkstra</NavDropdown.Item>
<NavDropdown.Item href="/">BFS</NavDropdown.Item>
<NavDropdown.Item href="/">DFS</NavDropdown.Item>
<NavDropdown.Item href="/">Greedy</NavDropdown.Item>
<NavDropdown.Item href="/">A*</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="Sorting Algorithms" id="basic-nav-dropdown">
<NavDropdown.Item href="/BarSort/BarSort">Quick</NavDropdown.Item>
<NavDropdown.Item href="/">Merge</NavDropdown.Item>
<NavDropdown.Item href="/">Heap</NavDropdown.Item>
<NavDropdown.Item href="/">Bubble</NavDropdown.Item>
<NavDropdown.Item href="/">Binary</NavDropdown.Item>
</NavDropdown> */}
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
Example #25
| Source File: nav.comp.js From topshot-explorer with MIT License | 5 votes |
|
export function TopShotNav() {
const [error, setError] = useState(null)
const [accountAddress, setAccountAddress] = useState("")
const [seriesSets, setSeriesSets] = useState(null)
useEffect(() => {
getTopshotOverview()
.then((d) => {
console.log(d)
setSeriesSets(splitSets(d.sets))
})
.catch(setError)
}, [])
return (
<Navbar bg="dark" variant="dark" expand="md" sticky="top">
<Navbar.Brand href="/">
{error ? <Red>Topshot Explorer</Red> : "Topshot Explorer"}
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/plays">Plays</Nav.Link>
{seriesSets && Object.entries(seriesSets).map(
([series, sets],i) => {
return (
<NavDropdown key={series} title={`s${series} sets`} id="basic-nav-dropdown">
{sets.map((s) => {
return (
<NavDropdown.Item key={s.id} href={"/sets/" + s.id}>
{s.id} {s.setName} S{s.series} {s.locked ? <Red>locked</Red> : <Green>open</Green>}
</NavDropdown.Item>
)
})}
</NavDropdown>
)
}
)
}
{/* <NavDropdown title="Sets" id="basic-nav-dropdown">
{topshotOverview &&
topshotOverview.sets.map((s) => {
return (
<NavDropdown.Item key={s.id} href={"/sets/" + s.id}>
{s.id} {s.setName} S{s.series} {s.locked ? <Red>locked</Red> : <Green>open</Green>}
</NavDropdown.Item>
)
})}
</NavDropdown> */}
</Nav>
<Form inline>
<FormControl
type="text"
placeholder="0xAccountID"
onChange={(event) => {
setAccountAddress(event.target.value)
}}
className="mr-sm-2"
/>
<Button variant="outline-success" href={"/account/" + accountAddress}>
Get Account
</Button>
</Form>
</Navbar.Collapse>
</Navbar>
)
}
Example #26
| Source File: App.js From LinkedIn-Scraper with Apache License 2.0 | 5 votes |
|
function App() {
return (
<div>
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#home">
<span role="img" aria-label="logo">
?
</span>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
About
</Nav.Link>
<Nav.Link href="#home">Contact</Nav.Link>
<Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
Contribute
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Jumbotron className="text-center jumbotron">
<Container>
<Row>
<Col></Col>
<Col xs={6}>
<h1 className="my-head">
{/* <span
className="typer"
id="main"
data-words=""
data-delay="100"
data-colors="#FFFFFF,#9ac4f8"
data-delete-delay="1000"
></span>
<span className="cursor" data-owner="main"></span> */}
MalloCat, A LinkedIn Scraper
</h1>
<p className="lead ">
MalloCat is a platform for displaying the latest Software
Engineer job information to the new graduates. Supported by
automatic running crawlers targeting on LinkedIn.
</p>
<p>
<Button
className="rounded-pill"
variant="outline-light"
href="https://github.com/xtstc131/LinkedIn-Scraper"
>
Github
<img className="btn_logo" src={github_logo} alt="" />
</Button>
</p>
</Col>
<Col></Col>
</Row>
</Container>
</Jumbotron>
<hr className="my-4"></hr>
<div className="content">
<Container>
<Tabs>
<Tab eventKey="linkedin_fulltime" title="Full-time">
<Table source="linkedin_fulltime"></Table>
</Tab>
<Tab eventKey="linkedin_intern" title="Intern">
<Table source="linkedin_intern"></Table>
</Tab>
</Tabs>
<p>© 2020. All rights reserved.</p>
<img
src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Flinkedin-spider.netlify.app"
alt=""
/>
</Container>
</div>
</div>
);
}
Example #27
| Source File: DateTimePicker.js From orca-ui with Apache License 2.0 | 5 votes |
|
render(){
return(
<Navbar bg="dark" variant="dark" expand="lg" fixed="bottom" >
<div className="date-picker-container">
<span onClick={this.handleRefresh} className="refresh">
<i className="fas fa-sync-alt fa-lg refresh-icon" />
</span>
<DatePicker
className="date-picker"
selected={this.state.date}
onChange={this.handleDateChange}
dateFormat='dd/MM/yyyy hh:mm a'
showTimeSelect
timeIntervals={15}
maxDate={new Date()}
/>
</div>
<div className="selector-container" id="namespace-selector-container">
<Select
className='react-select-container'
classNamePrefix="react-select"
menuPlacement="top"
options={this.state.namespaceOptions}
placeholder="Select Namespace.."
onChange={(e) => this.props.handleNamespaceChange(e)}
isClearable
/>
</div>
<div className="selector-container" id="object-selector-container">
<Select
className='react-select-container'
classNamePrefix="react-select"
menuPlacement="top"
options={this.state.objectKindOptions}
placeholder="Select Objects.."
onChange={(e) => this.props.handleKindChange(e)}
isMulti
defaultValue = {this.props.defaultKinds}
theme={theme => ({
...theme,
colors: {
...theme.colors,
primary: theme.colors.neutral60,
primary50: theme.colors.neutral40,
primary25: theme.colors.neutral20
}
})}
isClearable
/>
</div>
<InterfaceVisibilityControls showLabels={this.state.showLabels} toggleNodeLabels={this.props.toggleNodeLabels} />
</Navbar>
);
}
Example #28
| Source File: App.js From LinkedIn-Scraper with Apache License 2.0 | 5 votes |
|
function App() {
return (
<div>
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#home">
<span role="img" aria-label="logo">
?
</span>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
About
</Nav.Link>
<Nav.Link href="#home">Contact</Nav.Link>
<Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
Contribute
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Jumbotron className="text-center">
<Container>
<Row>
<Col></Col>
<Col xs={6}>
<div className="tiper-js-container">
<h1 className="jumbotron-heading">MalloCat</h1>
{/* <p className="lead"> */}
<Typist avgTypingDelay={40} startDelay={2000}>
MalloCat is a platform for displaying the latest Software
Engineer job information to the new graduates. Supported by
automatic running crawlers targeting on LinkedIn.
</Typist>
{/* </p> */}
</div>
<p>
<Button
className="rounded-pill"
variant="outline-dark"
href="https://github.com/xtstc131/LinkedIn-Scraper"
>
Github
<img className="btn_logo" src={github_logo} alt="" />
</Button>
</p>
</Col>
<Col></Col>
</Row>
</Container>
</Jumbotron>
<Container>
<Table source="linkedin"></Table>
<p>© 2020. All rights reserved.</p>
<img
src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Flinkedin-spider.netlify.app"
alt=""
/>
</Container>
</div>
);
}
Example #29
| Source File: TopNav.js From katanapools with GNU General Public License v2.0 | 5 votes |
|
render() {
const {user: {providerConnected}} = this.props;
let addressBar = <span/>;
let currentConnection = <span/>;
if (!providerConnected) {
currentConnection = <div className="provider-connection-error">No Metamask connection detected.</div>
}
if (window.web3 && window.web3.currentProvider) {
const selectedAddress = window.web3.currentProvider.selectedAddress;
const currentNetwork = window.web3.currentProvider.networkVersion;
if (currentNetwork && selectedAddress) {
addressBar = <AddressDisplay address={selectedAddress}/>
if (currentNetwork.toString() === '1') {
currentConnection = <div className="connection-string">Connected to Mainnet</div>;
}
if (currentNetwork.toString() === '3') {
currentConnection = <div className="connection-string">Connected to Ropsten</div>;
}
}
}
return (
<div>
<Navbar expand="lg" className="app-top-nav">
<Navbar.Brand href="/">Katana Pools</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar id="basic-navbar-nav">
<Nav className="mr-auto">
<LinkContainer to="/explore">
<NavItem key={1}>Explore Tokens</NavItem>
</LinkContainer>
<LinkContainer to="/pool/view">
<NavItem key={2}>Explore Pools</NavItem>
</LinkContainer>
<LinkContainer to="/pool/create">
<NavItem key={3}>Create Pool</NavItem>
</LinkContainer>
</Nav>
</Navbar>
<div>
{currentConnection}
{addressBar}
</div>
</Navbar>
</div>
)
}
