diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index 39f2f1e..277d675 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -1,7 +1,26 @@
import { Wrapper } from './styles';
-const Input = () => {
- return ;
+type InputProps = {
+ 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;
+ onChange: (event: React.ChangeEvent) => void;
+};
+
+const Input = ({ type, value, ...props }: InputProps) => {
+ return (
+
+
+
+ );
};
export default Input;
diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts
index 14ea300..b29507f 100644
--- a/src/components/Input/styles.ts
+++ b/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;
+};
+
+export const Wrapper = styled.div`
+ 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;
+ }
+ `};
+`;
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 18e4a1f..a99d05e 100644
--- a/src/components/index.tsx
+++ b/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 };