Complete link component

src/components/Link/index.tsx

@@ -1,7 +1,24 @@
+import { Link as RouterLink } from 'react-router-dom';
 import { Wrapper } from './styles';
 
-const Link = () => {
-  return <Wrapper></Wrapper>;
+type LinkProps = {
+  href: string;
+  children?: React.ReactNode | JSX.Element | string;
+  color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
+  className?: string;
+  iconLeft?: React.SVGProps<SVGSVGElement>;
+  onClick?: () => void;
+};
+
+const Link = ({ href, children, iconLeft, ...props }: LinkProps) => {
+  return (
+    <Wrapper {...props}>
+      <RouterLink to={href}>
+        {iconLeft && <span className='icon left'>{iconLeft}</span>}
+        {children}
+      </RouterLink>
+    </Wrapper>
+  );
 };
 
 export default Link;

src/components/Link/styles.ts

@@ -1,3 +1,171 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const Wrapper = styled.div``;
+type WrapperProps = {
+  color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
+  iconLeft?: React.SVGProps<SVGSVGElement>;
+};
+
+export const Wrapper = styled.div<WrapperProps>`
+  display: inline;
+
+  a {
+    text-decoration: none;
+  }
+
+  ${({ color, theme }) => {
+    if (!color)
+      return css`
+        color: #3e66fb;
+
+        .icon svg path {
+          stroke: #3e66fb;
+        }
+
+        a:visited {
+          color: #3e66fb;
+        }
+      `;
+    switch (color) {
+      case 'client':
+        return css`
+          color: ${theme.colors.client.main};
+
+          .icon svg path {
+            stroke: ${theme.colors.client.main};
+          }
+
+          a:visited {
+            color: ${theme.colors.client.main};
+          }
+        `;
+      case 'productOwner':
+        return css`
+          color: ${theme.colors.productOwner.main};
+
+          .icon svg path {
+            stroke: ${theme.colors.productOwner.main};
+          }
+
+          a:visited {
+            color: ${theme.colors.productOwner.main};
+          }
+        `;
+      case 'developer':
+        return css`
+          color: ${theme.colors.developer.main};
+
+          .icon svg path {
+            stroke: ${theme.colors.developer.main};
+          }
+
+          a:visited {
+            color: ${theme.colors.developer.main};
+          }
+        `;
+      case 'admin':
+        return css`
+          color: ${theme.colors.admin.main};
+
+          .icon svg path {
+            stroke: ${theme.colors.admin.main};
+          }
+
+          a:visited {
+            color: ${theme.colors.admin.main};
+          }
+        `;
+      case 'success':
+        return css`
+          color: ${theme.colors.success.main};
+
+          .icon svg path {
+            stroke: ${theme.colors.success.main};
+          }
+
+          a:visited {
+            color: ${theme.colors.success.main};
+          }
+        `;
+      case 'warning':
+        return css`
+          color: ${theme.colors.warning.main};
+
+          .icon svg path {
+            stroke: ${theme.colors.warning.main};
+          }
+
+          a:visited {
+            color: ${theme.colors.warning.main};
+          }
+        `;
+      case 'error':
+        return css`
+          color: ${theme.colors.error.main};
+
+          .icon svg path {
+            stroke: ${theme.colors.error.main};
+          }
+
+          a:visited {
+            color: ${theme.colors.error.main};
+          }
+        `;
+      case 'black':
+        return css`
+          color: ${theme.colors.black.main};
+
+          .icon svg path {
+            stroke: ${theme.colors.black.main};
+          }
+
+          a:visited {
+            color: ${theme.colors.black.main};
+          }
+        `;
+      case 'white':
+        return css`
+          color: ${theme.colors.white.main};
+
+          .icon svg path {
+            stroke: ${theme.colors.white.main};
+          }
+
+          a:visited {
+            color: ${theme.colors.white.main};
+          }
+        `;
+      default:
+        return css`
+          color: ${color};
+
+          .icon svg path {
+            stroke: ${color};
+          }
+
+          a:visited {
+            color: ${color};
+          }
+        `;
+    }
+  }}
+
+  ${({ iconLeft }) => {
+    if (iconLeft)
+      return css`
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      `;
+    return '';
+  }}
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .icon.left {
+    margin-right: 5px;
+  }
+`;

src/components/index.tsx

@@ -1,5 +1,6 @@
 import Button from './Button';
 import Box from './Box';
 import Text from './Text';
+import Link from './Link';
 
-export { Button, Box, Text };
+export { Button, Box, Text, Link };