diff --git a/frontend/package.json b/frontend/package.json
index 0dcd8b3..1f0f0a9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,11 +18,13 @@
"date-fns": "^2.17.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
+ "react-hook-form": "^6.15.4",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"reselect": "^4.0.0",
- "styled-components": "^5.2.1"
+ "styled-components": "^5.2.1",
+ "yup": "^0.32.9"
},
"devDependencies": {
"@testing-library/react": "^11.0.0",
diff --git a/frontend/src/components/Form/Form.styled.tsx b/frontend/src/components/Form/Form.styled.tsx
new file mode 100644
index 0000000..013f8cc
--- /dev/null
+++ b/frontend/src/components/Form/Form.styled.tsx
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const StyledForm = styled.form`
+width: 293px;
+height: 247px;
+display: flex;
+flex-direction: column;
+justify-content: space-evenly;
+align-items: center;
+`;
\ No newline at end of file
diff --git a/frontend/src/components/Form/Form.tsx b/frontend/src/components/Form/Form.tsx
new file mode 100644
index 0000000..646326f
--- /dev/null
+++ b/frontend/src/components/Form/Form.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import Input from '../Input/Input';
+import { StyledForm } from './Form.styled';
+
+const Form = () => (
+
+
+
+
+
+);
+
+export default Form;
diff --git a/frontend/src/components/Input/Input.styled.tsx b/frontend/src/components/Input/Input.styled.tsx
new file mode 100644
index 0000000..37365b1
--- /dev/null
+++ b/frontend/src/components/Input/Input.styled.tsx
@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+export const StyledInputWrapper = styled.div`
+ width: 90%;
+ display: flex;
+ flex-direction: column;
+`;
+
+export const StyledInput = styled.input`
+ width: 90%;
+ height: 36px;
+ border: ${(props) =>
+ props.withError ? '1px solid #F53314' : '1px solid #272727'};
+ border-radius: 6px;
+ padding-left: 5.2%;
+
+ &:disabled {
+ border: 1px solid #d1d1d1;
+ }
+ &::placeholder {
+ color: #d1d1d1;
+ }
+`;
+
+export const StyledLabel = styled.label`
+ font-size: 10px;
+ margin-bottom: 2%;
+ ${(props) => {
+ if (props.withError) {
+ return `color: #9C1B07`;
+ }
+ if (props.disabled) {
+ return `color: #D1D1D1`;
+ }
+ return `color: black`;
+ }}
+`;
+
+export const StyledErrorMessage = styled.div`
+ width: 100%;
+ color: #9c1b07;
+ font-size: 10px;
+`;
diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx
new file mode 100644
index 0000000..f862eda
--- /dev/null
+++ b/frontend/src/components/Input/Input.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import {
+ StyledInput,
+ StyledInputWrapper,
+ StyledLabel,
+ StyledErrorMessage,
+} from './Input.styled';
+
+interface Props {
+ disabled: boolean;
+ label: string;
+ withError: boolean;
+ placeholder: string;
+ errorMessage: string;
+}
+
+const Input = ({
+ disabled,
+ label,
+ withError,
+ placeholder,
+ errorMessage,
+}: Props) => {
+ const [inputValue, setInputValue] = useState('');
+ const handleInputChange = (e: { target: { value: string } }) => {
+ setInputValue(e.target.value);
+ };
+
+ return (
+
+
+ {label}
+
+
+ {withError && {errorMessage}}
+
+ );
+};
+
+export default Input;
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 1ee77e9..175c4c0 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -8,6 +8,7 @@ import {
import { useInterval } from '../hooks/useInterval';
import { DefaultLayout } from '../components/Layout/DefaultLayout';
import { Typography } from '../components/Typography/Typography';
+import Form from '../components/Form/Form';
export const Home = () => {
const dispatch = useAppDispatch();
@@ -31,12 +32,14 @@ export const Home = () => {
Edit pages/App.tsx and save to test HMR updates.
-
+
+
+
Project bootstraped with{' '}