+
+ {
+ setInputValue(event.target.value);
+ if (onChange) {
+ onChange(event);
+ }
+ }}
+ {...props}
+ className={`${baseStyles['text-input__input']} ${styles['autocomplete__input']}`}
+ />
+
+ );
+ },
+);
+
+export default AutocompleteInput;
diff --git a/src/components/UI/baseInput/BaseInput.module.sass b/src/components/UI/baseInput/BaseInput.module.sass
new file mode 100644
index 0000000..8ce7e68
--- /dev/null
+++ b/src/components/UI/baseInput/BaseInput.module.sass
@@ -0,0 +1,32 @@
+@import '@/styles/variable.sass'
+
+.text-input
+ display: grid
+ grid-template-columns: repeat(2, auto)
+ grid-template-rows: repeat(2, auto)
+ align-items: center
+ column-gap: 10px
+
+ &__label
+ font-weight: 500
+ color: $info-color
+
+ &__input-wrapper
+ position: relative
+
+ &__input
+ padding: 8px 0
+ width: 300px
+ border-bottom: 2px solid $dark-color
+ border-bottom-color: $dark-color
+ transition: border-bottom-color 0.3s
+
+ &:focus
+ border-bottom-color: $accent-color
+
+ &__helper
+ min-height: 18px
+ max-width: 300px
+ grid-column-start: 2
+ font-size: 0.75rem
+ letter-spacing: 0.03rem
diff --git a/src/components/UI/baseInput/BaseInput.tsx b/src/components/UI/baseInput/BaseInput.tsx
new file mode 100644
index 0000000..c0ed2fa
--- /dev/null
+++ b/src/components/UI/baseInput/BaseInput.tsx
@@ -0,0 +1,35 @@
+import { forwardRef, InputHTMLAttributes, ReactNode } from 'react';
+
+import styles from '@/components/UI/baseInput/BaseInput.module.sass';
+
+export interface IBaseInputProps extends InputHTMLAttributes
+
+ {helperText}
+ -
+ {filteredOptions.map((option) => (
+
- handleOptionClick(option)} + > + {option} + + ))} +
+
+
+ );
+ },
+);
+
+export default BaseInput;
diff --git a/src/components/UI/button/Button.module.sass b/src/components/UI/button/Button.module.sass
new file mode 100644
index 0000000..5c7f7f1
--- /dev/null
+++ b/src/components/UI/button/Button.module.sass
@@ -0,0 +1,22 @@
+@import '@/styles/variable.sass'
+
+.button
+ display: flex
+ align-items: center
+ justify-content: center
+ padding: 12px 35px
+ background-color: $dark-color
+ color: $light-color
+ transition: background-color 0.3s
+
+ &:focus,
+ &:focus-visible
+ background-color: $accent-color
+
+ &:disabled
+ background-color: $info-color
+ cursor: not-allowed
+
+ @media(hover: hover)
+ &:hover()
+ background-color: $accent-color
diff --git a/src/components/UI/button/Button.tsx b/src/components/UI/button/Button.tsx
new file mode 100644
index 0000000..cc9a3f8
--- /dev/null
+++ b/src/components/UI/button/Button.tsx
@@ -0,0 +1,13 @@
+import { ButtonHTMLAttributes } from 'react';
+
+import styles from '@/components/UI/button/Button.module.sass';
+
+const Button = ({ children, ...props }: ButtonHTMLAttributes
+
+ {children}
+
+ {helperText}
+
+
+
+ {helperText}
+
+ ),
+);
+
+export default ImageInput;
diff --git a/src/components/UI/passwordInput/PasswordInput.module.sass b/src/components/UI/passwordInput/PasswordInput.module.sass
new file mode 100644
index 0000000..73e5c19
--- /dev/null
+++ b/src/components/UI/passwordInput/PasswordInput.module.sass
@@ -0,0 +1,19 @@
+@import '@/styles/variable.sass'
+
+.progressBar
+ position: absolute
+ left: 0
+ bottom: -4
+ height: 4px
+
+ &_weak
+ background-color: $error-color
+ width: 33%
+
+ &_medium
+ background-color: $warning-color
+ width: 66%
+
+ &_strong
+ background-color: $success-color
+ width: 100%
diff --git a/src/components/UI/passwordInput/PasswordInput.tsx b/src/components/UI/passwordInput/PasswordInput.tsx
new file mode 100644
index 0000000..786490b
--- /dev/null
+++ b/src/components/UI/passwordInput/PasswordInput.tsx
@@ -0,0 +1,33 @@
+import { forwardRef, Ref } from 'react';
+
+import BaseInput, { IBaseInputProps } from '@/components/UI/baseInput/BaseInput';
+import styles from '@/components/UI/passwordInput/PasswordInput.module.sass';
+
+interface PasswordInputProps extends IBaseInputProps {
+ textLength?: number;
+}
+
+const OPTIMAL_PASSWORD_LENGTH = 8;
+
+const PasswordInput = forwardRef
+
+ {textLength > 0 && (
+
+ )}
+
+
+ );
+ },
+);
+
+export default PasswordInput;
diff --git a/src/components/UI/select/Select.tsx b/src/components/UI/select/Select.tsx
new file mode 100644
index 0000000..5a86806
--- /dev/null
+++ b/src/components/UI/select/Select.tsx
@@ -0,0 +1,42 @@
+import { SelectHTMLAttributes, forwardRef } from 'react';
+
+import styles from '@/components/UI/select/Select.module.sass';
+
+interface ISelectProps extends SelectHTMLAttributes
+
+
+ );
+ },
+);
+
+export default Select;
diff --git a/src/components/UI/select/select.module.sass b/src/components/UI/select/select.module.sass
new file mode 100644
index 0000000..e469c11
--- /dev/null
+++ b/src/components/UI/select/select.module.sass
@@ -0,0 +1,45 @@
+@import '@/styles/variable.sass'
+
+.select
+ display: grid
+ grid-template-columns: repeat(2, auto)
+ grid-template-rows: repeat(2, auto)
+ align-items: center
+ column-gap: 10px
+
+ &__label
+ font-weight: 500
+ color: $info-color
+
+ &__wrapper
+ position: relative
+ width: 300px
+
+ &__element
+ padding: 8px 0
+ width: 100%
+ border-bottom: 2px solid $dark-color
+ background-color: transparent
+ appearance: none
+ transition: border-bottom-color 0.3s
+
+ &:focus
+ border-bottom-color: $accent-color
+
+ &__arrow
+ content: ''
+ position: absolute
+ right: 10px
+ top: 50%
+ transform: translateY(-50%)
+ border-left: 5px solid transparent
+ border-right: 5px solid transparent
+ border-top: 5px solid $dark-color
+ pointer-events: none
+
+ &__helper
+ min-height: 18px
+ max-width: 300px
+ grid-column-start: 2
+ font-size: 0.75rem
+ letter-spacing: 0.03rem
diff --git a/src/components/formItem/FormItem.module.sass b/src/components/formItem/FormItem.module.sass
new file mode 100644
index 0000000..27bdbbc
--- /dev/null
+++ b/src/components/formItem/FormItem.module.sass
@@ -0,0 +1,28 @@
+@import '@/styles/variable.sass'
+
+.form-item
+ width: 700px
+ display: flex
+ justify-content: space-between
+ gap: 20px
+ padding: 15px
+ border: 1px solid $info-color
+
+ &_success
+ border: 2px solid $accent-color
+
+ &__main-info
+ display: flex
+ gap: 20px
+ margin-bottom: 10px
+ flex-wrap: wrap
+
+ &__image
+ width: 250px
+ height: 250px
+ object-fit: contain
+
+p
+ margin: 0
+ font-size: 1rem
+ color: $dark-color
diff --git a/src/components/formItem/FormItem.tsx b/src/components/formItem/FormItem.tsx
new file mode 100644
index 0000000..a4d4816
--- /dev/null
+++ b/src/components/formItem/FormItem.tsx
@@ -0,0 +1,40 @@
+import styles from '@/components/formItem/FormItem.module.sass';
+import { FormDataWithBase64 } from '@/models/types';
+
+type FormItemType = {
+ form: FormDataWithBase64;
+ isSuccess: boolean;
+};
+
+const FormItem = ({ form, isSuccess }: FormItemType) => {
+ return (
+
+
+
+
+ {helperText}
+ -
+
- + Name: {form.name} + +
- + Age: {form.age} + +
- + Gender: {form.gender} + +
- + E-mail: {form.email} + +
- + Country: {form.country} + +
- + Password: {form.password} + +
- + Terms Accepted: {form.terms ? 'Yes' : 'No'} + +
-
+ {forms.map((form, index) => (
+
+
+
+
+
+
+ );
+};
+
+export default Root;
diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
new file mode 100644
index 0000000..ed05526
--- /dev/null
+++ b/src/routes/Router.tsx
@@ -0,0 +1,31 @@
+import { createBrowserRouter } from 'react-router-dom';
+
+import Main from '@/components/main/Main';
+import ReactHookForm from '@/components/reactHookForm/ReactHookForm';
+import UncontrolledForm from '@/components/uncontrolledForm/UncontrolledForm';
+import Root from '@/routes/Root';
+import NotFound from '@/views/notFound/NotFound';
+
+const router = createBrowserRouter([
+ {
+ path: '/',
+ element: NotFound
;
+};
+
+export default NotFound;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///