Add arrow to link

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>
     );
 };