react-scroll#Link JavaScript Examples
The following examples show how to use
react-scroll#Link.
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: banner.js From web-frontend with MIT License | 6 votes |
|
render() {
return (
<div id="banner">
<Container fluid>
<Row className="jumbotronn" id="banner">
<Col>
<h2>Halo,</h2>
<h1>wong kito!</h1>
<p>
Palembang Digital (Patal)
<span className="bold">
{" "}
adalah grup berbagi informasi seputar IT Development &
Digital di daerah Sumatera Selatan.
</span>
</p>
</Col>
<Col sm="6" className="logo">
<img src={"/logo.png"} width="180px" alt="logo" />
</Col>
</Row>
<div className="scroll-down">
<Link to="join" smooth={true} duration={1000}>
<img src={"/icons/down.png"} alt="scroll" width="17px"></img>
</Link>
</div>
</Container>
</div>
);
}
Example #2
| Source File: landing.js From News24x7-Client with MIT License | 6 votes |
|
Button = styled(Link)`
border-radius: 50px;
background: ${({ primary }) =>
primary ? "rgb(4, 4, 136)" : "rgb(0, 0, 117)"};
white-space: nowrap;
border: 2px solid rgb(0, 0, 117);
padding: ${({ big }) => (big ? "14px 48px" : "12px 30px")};
font-size: ${({ fontBig }) => (fontBig ? "20px" : "16px")};
outline: none;
color: #fff;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
margin: 5px;
&:hover {
transition: all 0.2s ease-in-out;
background: ${({ primary }) => (primary ? "black" : "rgb(4, 4, 182)")};
border: 2px solid rgb(0, 0, 117);
}
`
Example #3
| Source File: NavItem.jsx From gatsby-startbootstrap-agency with MIT License | 6 votes |
|
NavItem = ({ to, onClick, children }) => {
return (
<Nav.Item>
<Link
className="nav-link cursor-pointer"
activeClass="active"
to={to}
spy
smooth="easeInOutQuart"
onClick={onClick}
>
{children || to}
</Link>
</Nav.Item>
);
}
Example #4
| Source File: navbar.js From web-frontend with MIT License | 5 votes |
|
NavbarDefault = () => {
const [isOpen, setIsOpen] = useState(false);
const [currentPath, setCurrentPath] = useState("");
const toggle = () => setIsOpen(!isOpen);
useEffect(() => {
if (typeof window !== "undefined") {
setCurrentPath(window.location.pathname);
}
}, [currentPath]);
return (
<div id="topNav">
<Navbar color="light" className="topNav" light expand="md">
<GatsbyLink to="/">
<img alt="Palembang Digital" src={"/logo.png"} width="50px" />
</GatsbyLink>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
{!currentPath.startsWith("/patal-team") ? (
<Link
to={`event`}
smooth={true}
duration={1000}
className="NavLink">
Acara
</Link>
) : (
<GatsbyLink to="/#event" className="NavLink">
Acara
</GatsbyLink>
)}
</NavItem>
<NavItem>
{!currentPath.startsWith("/patal-team") ? (
<Link
to={`tentang`}
smooth={true}
duration={1000}
className="NavLink">
Tentang
</Link>
) : (
<GatsbyLink to="/#tentang" className="NavLink">
Tentang
</GatsbyLink>
)}
</NavItem>
<NavItem>
{!currentPath.startsWith("/patal-team") ? (
<Link
to={`footer`}
smooth={true}
duration={1000}
className="NavLink">
Kontak
</Link>
) : (
<GatsbyLink to="/#footer" className="NavLink">
Kontak
</GatsbyLink>
)}
</NavItem>
<NavItem
className={currentPath.startsWith("/patal-team") ? "active" : ""}>
<GatsbyLink to="/patal-team" className="NavLink">
Tim
</GatsbyLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
Example #5
| Source File: HeaderLinks.js From EDAViewer with MIT License | 5 votes |
|
export default function HeaderLinks(props) {
const classes = useStyles();
return (
<List className={classes.list}>
<ListItem className={classes.listItem}>
<Button
color="transparent"
className={classes.navLink}
component={Link}
to={"section-home"}
>
<HomeIcon className={classes.icons}>unarchive</HomeIcon>{" "}
Home
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
color="transparent"
className={classes.navLink}
component={Link}
to={"section-features"}
offset={-60}
>
<ListAltIcon className={classes.icons}>
unarchive
</ListAltIcon>{" "}
Features
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
color="transparent"
className={classes.navLink}
component={Link}
to={"section-contact"}
>
<AssistantPhotoIcon className={classes.icons} /> Contribute
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Tooltip
id="github-tooltip"
title="Check the source code on GitHub"
placement={"top"}
classes={{ tooltip: classes.tooltip }}
>
<Button
color="transparent"
href="https://github.com/ahmed-agiza/EDAViewer"
target="_blank"
className={classes.navLink}
>
<i className={classes.socialIcons + " fab fa-github"} />
</Button>
</Tooltip>
</ListItem>
</List>
);
}
Example #6
| Source File: SideBarHeading.jsx From intergalactic with MIT License | 5 votes |
|
function SideBarHeading({ headings }) {
const { pathname } = useLocation();
const [activeId, setActiveId] = React.useState();
React.useEffect(() => {
setActiveId(headings.length ? headings[0].id : undefined);
const links = headings.map((heading) => document.querySelector(`#${heading.id}`)).reverse();
const handleScroll = trottle(() => {
const scrollCenter =
document.scrollingElement.scrollTop + document.documentElement.clientHeight / 2;
const linkReversedIndex = links.findIndex((link) => scrollCenter > link.offsetTop);
if (linkReversedIndex !== -1)
setActiveId(headings[headings.length - 1 - linkReversedIndex]?.id);
});
document.addEventListener('scroll', handleScroll);
return () => document.removeEventListener('scroll', handleScroll);
}, [pathname, headings]);
return (
<>
<div className={styles.sideBarWrapper}>
{headings.map((heading) => (
<Link
className={cx(styles.navLink, heading.id === activeId && styles.navLinkActive)}
key={heading.html}
to={heading.id}
smooth={true}
offset={-140}
duration={200}
delay={0}
>
{heading.html}
</Link>
))}
</div>
<span className={styles.buttonUp} onClick={() => animateScroll.scrollToTop({ smooth: true })}>
<ArrowUpM interactive />
</span>
</>
);
}
Example #7
| Source File: ambassador.js From DevEmpire with MIT License | 5 votes |
|
Content = () => {
const [searchTerm, setSearchTerm] = useState("");
// const { pathname } = useLocation();
// useEffect(() => {
// window.scrollTo(0, 0);
// }, [pathname]);
const filterOptions =
searchTerm !== ""
? Datas.filter((data) =>
data.head.toLowerCase().includes(searchTerm.toLowerCase())
)
: Datas;
return (
<>
<div className="container-landing">
<div className="landing-page-header">
<div className="header-details">
<h1>Ambassador</h1>
<p>
Place where you can find all the resources and details of
ambassador/fellowship that are available across different
companies.
</p>
<Link to="container" smooth={true} duration={1000}>
<h4>Explore all</h4>
</Link>
<div className="search-container">
<i className="fa fa-search search-icon"></i>
<input
className="search"
text="type"
placeholder="Search"
onChange={(event) => {
setSearchTerm(event.target.value);
}}
/>
</div>
</div>
</div>
</div>
<div className="container" id="container">
<div className="align-flex">
{filterOptions.length > 0 ? (
filterOptions.map((data, indx) => (
<Card
key={indx}
about={data.about}
alt={data.alt}
head={data.head}
image={data.image}
link={data.link}
/>
))
) : (
<NoResults search={searchTerm} />
)}
</div>
</div>
</>
);
}
Example #8
| Source File: games.js From DevEmpire with MIT License | 5 votes |
|
Content = () => {
const [searchTerm, setSearchTerm] = useState("");
// const { pathname } = useLocation();
// useEffect(() => {
// window.scrollTo(0, 0);
// }, [pathname]);
const filterOptions =
searchTerm !== ""
? Datas.filter((data) =>
data.head.toLowerCase().includes(searchTerm.toLowerCase())
)
: Datas;
return (
<>
<div className="container-landing">
<div className="landing-page-header">
<div className="header-details">
<h1>Games</h1>
<p>
</p>
<Link to="container" smooth={true} duration={1000}>
<h4>Explore all</h4>
</Link>
<div className="search-container">
<i className="fa fa-search search-icon"></i>
<input
className="search"
text="type"
placeholder="Search"
onChange={(event) => {
setSearchTerm(event.target.value);
}}
/>
</div>
</div>
</div>
</div>
<div className="container" id="container">
<div className="align-flex">
{filterOptions.length > 0 ? (
filterOptions.map((data, indx) => (
<Card
key={indx}
about={data.about}
alt={data.alt}
head={data.head}
image={data.image}
link={data.link}
/>
))
) : (
<NoResults search={searchTerm} />
)}
</div>
</div>
</>
);
}
Example #9
| Source File: jstoolkits.js From DevEmpire with MIT License | 5 votes |
|
Content = () => {
const [searchTerm, setSearchTerm] = useState("");
// const { pathname } = useLocation();
// useEffect(() => {
// window.scrollTo(0, 0);
// }, [pathname]);
const filterOptions =
searchTerm !== ""
? Datas.filter((data) =>
data.head.toLowerCase().includes(searchTerm.toLowerCase())
)
: Datas;
return (
<>
<div className="container-landing">
<div className="landing-page-header">
<div className="header-details">
<h1>JavaScript Toolkits</h1>
<p>
While the number of ways to organize JavaScript is almost
infinite, here are some collection of JS framework and libraries
that can help you while you are working on a project or searching
around the web.
</p>
<Link to="container" smooth={true} duration={1000}>
<h4>Explore all</h4>
</Link>
<div className="search-container">
<i className="fa fa-search search-icon"></i>
<input
className="search"
text="type"
placeholder="Search"
onChange={(event) => {
setSearchTerm(event.target.value);
}}
/>
</div>
</div>
</div>
</div>
<div className="container" id="container">
<div className="align-flex">
{filterOptions.length > 0 ? (
filterOptions.map((data, indx) => (
<Card
about={data.about}
alt={data.alt}
head={data.head}
image={data.image}
link={data.link}
key={indx}
/>
))
) : (
<NoResults search={searchTerm} />
)}
</div>
</div>
</>
);
}
Example #10
| Source File: programs.js From DevEmpire with MIT License | 5 votes |
|
Content = () => {
const [searchTerm, setSearchTerm] = useState("");
// const { pathname } = useLocation();
// useEffect(() => {
// window.scrollTo(0, 0);
// }, [pathname]);
const filterOptions =
searchTerm !== ""
? Datas.filter((data) =>
data.head.toLowerCase().includes(searchTerm.toLowerCase())
)
: Datas;
return (
<>
<div className="container-landing">
<div className="landing-page-header">
<div className="header-details">
<h1>Open Source Programs</h1>
<p>
Here you can find all the resources and details of Open Source
Programs and event that are available across different countries.
</p>
<Link to="container" smooth={true} duration={1000}>
<h4>Explore all</h4>
</Link>
<div className="search-container">
<i className="fa fa-search search-icon"></i>
<input
className="search"
text="type"
placeholder="Search"
onChange={(event) => {
setSearchTerm(event.target.value);
}}
/>
</div>
</div>
</div>
</div>
<div className="container" id="container">
<div className="align-flex">
{filterOptions.length > 0 ? (
filterOptions.map((data, indx) => (
<Card
about={data.about}
alt={data.alt}
head={data.head}
image={data.image}
link={data.link}
key={indx}
/>
))
) : (
<NoResults search={searchTerm} />
)}
</div>
</div>
</>
);
}
Example #11
| Source File: navbar.jsx From developerIdentity with MIT License | 4 votes |
|
Navbar = () => {
return (
<div className='header br3' >
<Link
id='lo'
className='logoo'
activeClass="active"
to="main"
spy={true}
smooth={true}
offset={0}
duration={700}
><Log /> </Link>
<div className='options' >
<Link
className='option'
activeClass="active"
to="main"
spy={false}
smooth={true}
offset={-70}
duration={700}
> HOME</Link>
<Link
className='option'
activeClass="active"
to="skills"
spy={true}
smooth={true}
offset={-70}
duration={700}
>SKILLS</Link>
<Link
className='option'
activeClass="active"
to="projects"
spy={true}
smooth={true}
offset={-70}
duration={700}
>PROJECTS</Link>
<Link
className='optiondelete'
activeClass="active"
to="firstdiv"
spy={true}
smooth={true}
offset={-70}
duration={700}
>ARTICLES</Link>
<Link
className='option'
activeClass="active"
to="about"
spy={true}
smooth={true}
offset={-70}
duration={700}
>ABOUT ME</Link>
<Link
className='option'
activeClass="active"
to="footer"
spy={true}
smooth={true}
offset={-20}
duration={700}
>CONTACT ME</Link>
</div>
</div>
);
}
Example #12
| Source File: index.jsx From minihackathon-2022 with MIT License | 4 votes |
|
Header = () => {
return (
<Popover className="relative bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="flex justify-between items-center border-0 py-3 md:justify-start md:space-x-10">
<div className="flex justify-start lg:w-0 lg:flex-1">
<div className="text-xl font-medium text-black hover:text-gray-900 list-none">
MiNi HACKATHON 2022
</div>
</div>
<div className="-mr-2 -my-2 md:hidden">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Open menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
<Popover.Group as="nav" className="hidden md:flex space-x-7">
<li className="text-base font-medium text-black hover:text-gray-900 mt-1 list-none cursor-pointer">
Home
</li>
<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<Link
to="eligibility"
spy={true}
smooth={true}
offset={10}
duration={500}
delay={100}
>
Eligibility
</Link>
</li>
<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<Link
to="timeline"
spy={true}
smooth={true}
offset={-10}
duration={600}
delay={100}
>
Timeline
</Link>
</li>
<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<Link
to="teams"
spy={true}
smooth={true}
offset={50}
duration={700}
delay={100}
>
Teams
</Link>
</li>
<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<Link
to="gallery"
spy={true}
smooth={true}
offset={30}
duration={800}
delay={100}
>
Gallery
</Link>
</li>
<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<Link
to="rules"
spy={true}
smooth={true}
offset={50}
duration={900}
delay={100}
>
Rules
</Link>
</li>
<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<Link
to="contact"
spy={true}
smooth={true}
offset={50}
duration={1000}
delay={100}
>
Contact
</Link>
</li>
<li className="ml-8 cursor-pointer inline-flex items-center justify-center px-4 py-1 border-0 rounded font-normal text-white hover:text-black bg-black hover:bg-gray-200 transition duration-0 hover:duration-500">
Join Teams
</li>
</Popover.Group>
</div>
</div>
<Transition
as={Fragment}
enter="duration-200 ease-out"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="duration-100 ease-in"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Popover.Panel
focus
className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5">
<div className="flex items-center justify-between">
<div className="-mr-2">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-black">
<span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="mt-6">
<nav className="grid gap-y-8">
{solutions.map((item) => (
<li
key={item.name}
to={item.to}
duration={500}
className="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50"
>
<span className="ml-3 text-base font-medium text-gray-700 cursor-pointer">
<Link
to={item.to}
spy={true}
smooth={true}
offset={50}
duration={500}
delay={100}
>
{item.name}
</Link>
</span>
</li>
))}
</nav>
</div>
</div>
<div className="py-6 px-5 space-y-6">
<div>
<a
href="/"
className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white hover:text-black bg-black hover:bg-gray-200 transition duration-0 hover:duration-500"
>
Join Teams
</a>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</Popover>
);
}
Example #13
| Source File: Header.jsx From doc2pen with Creative Commons Zero v1.0 Universal | 4 votes |
|
function Header() {
let navLinkRef = useRef(null);
let headerRef = useRef(null);
let btn1Ref = useRef(null);
let btn2Ref = useRef(null);
let btn3Ref = useRef(null);
const history = useHistory();
const [location, setLocation] = useState(window.location.pathname);
useEffect(() => {
return history.listen(location => {
setLocation(location.pathname);
});
}, [history]);
function drop() {
navLinkRef.current.classList.toggle(styles.rightDrop);
headerRef.current.classList.toggle(styles.HeaderOpen);
btn1Ref.current.classList.toggle(styles.btn1);
btn2Ref.current.classList.toggle(styles.btn2);
btn3Ref.current.classList.toggle(styles.btn3);
}
return (
<>
<header
ref={headerRef}
className={`${styles.Header} ${styles.HeaderDrop}`}
>
<NavLink
to="/"
onClick={() => {
if (headerRef.current.classList.contains(styles.HeaderOpen)) drop();
window.isHome = false;
}}
>
<img className={styles.left} src={logo} alt="Logo" />
</NavLink>
<div ref={navLinkRef} className={`${styles.right} ${styles.rightDrop}`}>
<NavLink
className={styles.header_links}
to="/"
exact
activeClassName={styles.header_active_links}
onClick={() => {
if (headerRef.current.classList.contains(styles.HeaderOpen))
drop();
window.isHome = false;
}}
>
Home
</NavLink>
<NavLink
className={styles.header_links}
to="/editor"
exact
activeClassName={styles.header_active_links}
onClick={() => {
if (headerRef.current.classList.contains(styles.HeaderOpen))
drop();
window.isHome = false;
}}
>
Editor
</NavLink>
<NavLink
className={`${styles.header_links} /*${styles.tagged}*/`}
to="/sketch"
exact
activeClassName={styles.header_active_links}
onClick={() => {
if (headerRef.current.classList.contains(styles.HeaderOpen))
drop();
window.isHome = false;
}}
>
Sketch
</NavLink>
<NavLink
className={`${styles.header_links} /*${styles.tagged}*/`}
to="/mediamanip"
exact
activeClassName={styles.header_active_links}
onClick={() => {
if (headerRef.current.classList.contains(styles.HeaderOpen))
drop();
window.isHome = false;
}}
>
Media Manip
</NavLink>
</div>
<div className={styles.hamburger} onClick={() => drop()}>
<div className={styles.menu_btn}>
<div ref={btn1Ref} className={styles.btn_line}></div>
<div ref={btn2Ref} className={styles.btn_line}></div>
<div ref={btn3Ref} className={styles.btn_line}></div>
</div>
</div>
</header>
<div className={styles.quick_box}>
{location === "/" &&
quickLinks.map(link => (
<Link
className={styles.quick_links}
key={link.name}
to={link.to}
offset={-100}
>
<span className="icon">{link.icon}</span>
{link.name}
</Link>
))}
</div>
</>
);
}
Example #14
| Source File: webdev.js From DevEmpire with MIT License | 4 votes |
|
Content = () => {
const [searchTerm, setSearchTerm] = useState("");
// const { pathname } = useLocation();
const [selectedLabel, setSelectedLabel] = useState("");
const labels = [
...new Set(
Datas.map((data) => {
if (!data.label) return null;
return data.label;
})
),
].filter((label) => label);
// useEffect(() => {
// window.scrollTo(0, 0);
// }, [pathname]);
const filterOptions = selectedLabel !== "" || searchTerm !== ""
? Datas.filter((data) => (selectedLabel === "" || data.label === selectedLabel) &&
(searchTerm === "" || data.head.toLowerCase().includes(searchTerm.toLowerCase())))
: Datas;
return (
<>
<div className="container-landing">
<div className="landing-page-header">
<div className="header-details">
<h1>Web Development Tools</h1>
<p>A collection of all the tools that are required in web development made by the community to ease the
process of web development.</p>
<Link to="container" smooth={true} duration={1000}>
<h4>Explore all</h4>
</Link>
<div className="search-container">
<i className="fa fa-search search-icon"></i>
<input
className="search"
text="type"
placeholder="Search"
onChange={(event) => {
setSearchTerm(event.target.value);
}}
/>
</div>
</div>
</div>
<div className="label-container">
<span
className="label"
style={
selectedLabel === ""
? { color: "white", background: "orange", border: "none" }
: {}
}
onClick={() => {
setSelectedLabel("");
}}
>
All
</span>
{labels.map((label) => {
return (
<span
key={label}
className="label"
style={
selectedLabel === label
? { color: "white", background: "#0093ed" }
: {}
}
onClick={() => {
setSelectedLabel(label);
}}
>
{label}
</span>
);
})}
</div>
</div>
<div className="container" id="container">
<div className="align-flex">
{filterOptions.length > 0 ? (
filterOptions.map((data, indx) => (
<Card image={data.image} alt={data.alt} link={data.link} head={data.head} about={data.about} key={indx} />
))
) : (
<NoResults search={searchTerm} />
)}
</div>
</div>
</>
);
}
Example #15
| Source File: footer.js From yezz.me with MIT License | 4 votes |
|
render() {
return (
<StaticQuery
query={graphql`
query footerTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<>
<footer>
<div className="container py-4">
<div className="row justify-content-center mt-2">
<ul className="list-style-none">
<li className="list-inline-item ml-2">
<Link
to="header"
className="link"
smooth={true}
role="button"
aria-label="To the top"
>
<FontAwesomeIcon icon={faArrowUp} />
</Link>
</li>
<li className="list-inline-item mr-4" alt="site title">
© {new Date().getFullYear()}{" "}
<a href="/">{data.site.siteMetadata.title}.</a>
</li>
<li className="list-inline-item mr-3">
<a
href="mailto:[email protected]"
target="_blank"
rel="noreferrer"
alt="email"
>
<FontAwesomeIcon icon={faEnvelope} />
</a>
</li>
<li className="list-inline-item mr-3">
<a
href="https://github.com/yezz123"
target="_blank"
rel="noreferrer"
alt="github"
>
<FontAwesomeIcon icon={faGithub} />
</a>
</li>
<li className="list-inline-item mr-3">
<a
href="https://www.linkedin.com/in/yezz123/"
target="_blank"
rel="noreferrer"
alt="linkedin link"
>
<FontAwesomeIcon icon={faLinkedin} />
</a>
</li>
<li className="list-inline-item mr-1">
<a
href="https://twitter.com/THyasser1"
target="_blank"
rel="noreferrer"
alt="twitter link"
>
<FontAwesomeIcon icon={faTwitter} />
</a>
</li>
</ul>
</div>
</div>
</footer>
</>
)}
></StaticQuery>
)
}
