Refactoring components

components/Input/index.tsx

@@ -0,0 +1,37 @@
+import { BigField, SmallField } from "./styles";
+import { Props } from "./types";
+
+const Input = ({
+	type = 'text',
+	variant = 'small',
+	name,
+	value,
+	required,
+	placeholder,
+	className,
+	onChange
+}: Props) => {
+	return variant === 'small' ? (
+		<SmallField
+			type={type}
+			name={name}
+			value={value}
+			required={required}
+			placeholder={placeholder}
+			className={className}
+			onChange={onChange}
+		/>
+	) : (
+		<BigField
+			name={name}
+			value={value}
+			required={required}
+			placeholder={placeholder}
+			className={className}
+			onChange={onChange}
+			rows={3}
+		/>
+	);
+};
+
+export default Input;

components/Input/styles.tsx

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const SmallField = styled.input`
+	border: none;
+	padding: 1rem;
+	background: var(--secondary-background);
+	color: var(--text);
+`;
+
+export const BigField = styled.textarea`
+	resize: none;
+	border: none;
+	padding: 1rem;
+	background: var(--secondary-background);
+	color: var(--text);
+`;

components/Input/types.ts

@@ -0,0 +1,10 @@
+export interface Props {
+	placeholder?: string;
+	type: 'text' | 'email';
+	variant: 'small' | 'big';
+	name: string;
+	value: string;
+	required?: boolean;
+	onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    className?: string;
+}