diff options
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r-- | packages/website/ts/@next/components/link.tsx | 16 |
1 files changed, 12 insertions, 4 deletions
diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx index c1b8b33e9..4a572b8a9 100644 --- a/packages/website/ts/@next/components/link.tsx +++ b/packages/website/ts/@next/components/link.tsx @@ -9,7 +9,8 @@ interface LinkInterface { children?: Node | string; isNoArrow?: boolean; hasIcon?: boolean | string; - isInline?: boolean; + isBlock?: boolean; + isCentered?: boolean; href?: string; theme?: { textColor: string; @@ -17,27 +18,34 @@ interface LinkInterface { } const StyledLink = styled(ReactRouterLink)<LinkInterface>` - display: ${props => props.isInline && 'inline-block'}; + display: ${props => !props.isBlock && 'inline-flex'}; color: ${props => props.color || props.theme.linkColor}; - padding: ${props => !props.isNoPadding && '18px 30px'}; + //padding: ${props => !props.isNoPadding && '18px 30px'}; text-align: center; font-size: 18px; text-decoration: none; + align-items: center; @media (max-width: 768px) { - padding: ${props => !props.isNoPadding && '6% 10%'}; + //padding: ${props => !props.isNoPadding && '6% 10%'}; + } + + svg { + margin-left: 3px; } `; export const Link = (props: LinkInterface) => { const { children, + isNoArrow, href, } = props; return ( <StyledLink to={href} {...props}> {children} + {!isNoArrow && <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z" fill="#00AE99"/></svg>} </StyledLink> ); }; |