Start working on input component

src/components/Input/index.tsx

@@ -1,7 +1,26 @@
 import { Wrapper } from './styles';
 
-const Input = () => {
+type InputProps = {
-  return <Wrapper></Wrapper>;
+  className?: string;
+  color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
+  error?: boolean;
+  errorMessage?: string;
+  value: string;
+  label: string;
+  type: 'text' | 'email' | 'password' | 'file' | 'number';
+  placeholder?: string;
+  fullWidth?: boolean;
+  multiline?: boolean;
+  iconLeft?: React.SVGProps<SVGSVGElement>;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+const Input = ({ type, value, ...props }: InputProps) => {
+  return (
+    <Wrapper {...props}>
+      <input type={type} value={value} />
+    </Wrapper>
+  );
 };
 
 export default Input;

src/components/Input/styles.ts

@@ -1,3 +1,83 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const Wrapper = styled.div``;
+type WrapperProps = {
+  color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
+  error?: boolean;
+  errorMessage?: string;
+  fullWidth?: boolean;
+  multiline?: boolean;
+  iconLeft?: React.SVGProps<SVGSVGElement>;
+};
+
+export const Wrapper = styled.div<WrapperProps>`
+  display: inline;
+  border-radius: 5px;
+  color: ${({ theme }) => theme.colors.black.main};
+
+  input {
+    background: none;
+    border: none;
+    color: ${({ theme }) => theme.colors.black.main};
+  }
+
+  ${({ color, theme }) => {
+    if (!color)
+      return css`
+        border: 2px solid ${theme.colors.client.light};
+      `;
+    switch (color) {
+      case 'client':
+        return css`
+          border: 2px solid ${theme.colors.client.light};
+        `;
+      case 'productOwner':
+        return css`
+          border: 2px solid ${theme.colors.productOwner.light};
+        `;
+      case 'developer':
+        return css`
+          border: 2px solid ${theme.colors.developer.light};
+        `;
+      case 'admin':
+        return css`
+          border: 2px solid ${theme.colors.admin.light};
+        `;
+      case 'success':
+        return css`
+          border: 2px solid ${theme.colors.success.main};
+        `;
+      case 'warning':
+        return css`
+          border: 2px solid ${theme.colors.warning.main};
+        `;
+      case 'error':
+        return css`
+          border: 2px solid ${theme.colors.error.main};
+        `;
+      case 'black':
+        return css`
+          border: 2px solid ${theme.colors.black.main};
+        `;
+      case 'white':
+        return css`
+          border: 2px solid ${theme.colors.white.main};
+        `;
+      default:
+        return css`
+          border: 2px solid ${color};
+        `;
+    }
+  }}
+
+  ${({ fullWidth }) =>
+    fullWidth &&
+    css`
+      width: 100%;
+      font-size: 1.25rem;
+
+      .icon svg {
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    `};
+`;

src/components/index.tsx

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