diff options
| -rw-r--r-- | packages/website/ts/@next/components/button.tsx | 29 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 8 |
2 files changed, 32 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 5d44f1ce5..3c22f705e 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Link as ReactRouterLink } from 'react-router-dom'; +import { Link as ReactRouterLink, NavLink as ReactRouterNavLink } from 'react-router-dom'; import styled from 'styled-components'; import { BREAKPOINTS } from 'ts/@next/components/layout'; @@ -86,6 +86,33 @@ Link.defaultProps = { isTransparent: true, }; +export const NavLink: React.ReactNode = (props: ButtonInterface) => { + const { + children, + href, + isWithArrow, + } = props; + const Component = Button.withComponent(ReactRouterNavLink); + + return ( + <Component to={href} {...props}> + {children} + + { isWithArrow && + <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path + d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z" + /> + </svg> + } + </Component> + ); +}; + +NavLink.defaultProps = { + isTransparent: true, +}; + // Added this, & + & doesnt really work since we switch with element types... export const ButtonWrap = styled.div` button + button, diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 3d9f2055c..6e9616e21 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -5,7 +5,7 @@ import styled, { withTheme } from 'styled-components'; import { colors } from 'ts/style/colors'; -import { Button, Link } from 'ts/@next/components/button'; +import { Button, Link, NavLink } from 'ts/@next/components/button'; import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers'; import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products'; import { Dropdown } from 'ts/@next/components/dropdowns/mock'; @@ -89,13 +89,13 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { return ( <Wrapper key={`nav-${index}`}> - <NavLink + <StyledNavLink href={link.url} isTransparent={true} isNoBorder={true} > {link.text} - </NavLink> + </StyledNavLink> {link.dropdownComponent && <DropdownWrap width={link.dropdownWidth}> @@ -169,7 +169,7 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>` } `; -const NavLink = styled(Link).attrs({ +const StyledNavLink = styled(NavLink).attrs({ activeStyle: { opacity: 1 }, })` opacity: 0.5; |