import React, { useState } from
"react"
;
import { Navbar, Nav, NavDropdown, OverlayTrigger, Tooltip,
} from
"react-bootstrap"
;
function
App() {
const [vSpace, setVSpacing] = useState(0);
const home = (
<Tooltip id=
"home-tooltip"
>
Go to Home
</Tooltip>);
const about = (
<Tooltip id=
"about-tooltip"
>
Learn About Us
</Tooltip>);
const service = (
<Tooltip id=
"services-tooltip"
>
Explore Our Services
</Tooltip>);
const contact = (
<Tooltip id=
"contact-tooltip"
>
Contact Us
</Tooltip>);
const vSpaceIncrease = () => {
if
(vSpace < 4) {
setVSpacing(
(prevSpacing) => prevSpacing + 2)}}
return
(
<div>
<Navbar bg=
"light"
expand=
"lg"
>
<Navbar.Brand href=
"#home"
style={{ color:
"green"
}}>
GeeksforGeeks
</Navbar.Brand>
<Navbar.Toggle aria-controls=
"basic-navbar-nav"
/>
<Navbar.Collapse id=
"basic-navbar-nav"
>
<Nav className=
"mr-auto"
>
<OverlayTrigger placement=
"bottom"
overlay={home}>
<Nav.Link href=
"#home"
className={`mx-2 my-${2 + vSpace}`}>
Home
</Nav.Link>
</OverlayTrigger>
<OverlayTrigger placement=
"bottom"
overlay={about}>
<Nav.Link href=
"#about"
className={`mx-2 my-${4 + vSpace}`}>
About
</Nav.Link>
</OverlayTrigger>
<OverlayTrigger placement=
"bottom"
overlay={service}>
<NavDropdown title=
"Services"
id=
"basic-nav-dropdown"
className={`mx-2 my-${6 + vSpace}`}>
<NavDropdown.Item href=
"#service1"
>
Pick Article
</NavDropdown.Item>
<NavDropdown.Item href=
"#service2"
>
Suggest Article
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href=
"#more-services"
>
Media
</NavDropdown.Item>
</NavDropdown>
</OverlayTrigger>
<OverlayTrigger placement=
"bottom"
overlay={contact}>
<Nav.Link href=
"#contact"
className={`mx-2 my-${4 + vSpace}`}>
Contact
</Nav.Link>
</OverlayTrigger>
</Nav>
</Navbar.Collapse>
</Navbar>
<div className=
"container mt-4"
>
<h1>
Welcome to GeeksforGeeks
</h1>
<p>
GeeksforGeeks is a leading platform
that provides computer science
resources and coding challenges
for
programmers and technology enthusiasts,
along
with
interview and exam
preparations
for
upcoming
aspirants.
</p>
<button onClick={vSpaceIncrease}>
Increase Vertical Spacing
</button>
<p>
Current Vertical Spacing: {vSpace}
</p>
</div>
</div>
)}
export
default
App;