+
+ );
+};
diff --git a/src/components/address/BillingAddress.tsx b/src/components/address/BillingAddress.tsx
new file mode 100644
index 0000000..b89fd3a
--- /dev/null
+++ b/src/components/address/BillingAddress.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import style from 'src/components/address/Address.module.scss';
+import Selector from 'src/components/selector/Selector.tsx';
+import { InputWithLabel } from 'src/components/input/InputWithLabel.tsx';
+import { Checkbox } from 'src/components/checkbox/Checkbox.tsx';
+
+interface BillingAddressProps {
+ formData: {
+ isBillingDefaultAddress: boolean;
+ billingStreet: string | undefined;
+ billingCity: string | undefined;
+ billingCountry: string | undefined;
+ billingPostalCode: string | undefined;
+ };
+ handleChange: (event: React.ChangeEvent{title}
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/card/Card.module.scss b/src/components/card/Card.module.scss
new file mode 100644
index 0000000..9ff7a35
--- /dev/null
+++ b/src/components/card/Card.module.scss
@@ -0,0 +1,177 @@
+@import 'src/styles/variables';
+@import 'src/styles/mixins';
+
+.container,
+.main_image {
+ margin: 0 auto;
+}
+
+.container {
+ width: 90%;
+ height: 100vh;
+}
+
+.product {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ padding: 10% 0 10% 0;
+ @include media-1000 {
+ flex-direction: column;
+ }
+}
+
+.container_images,
+.main_image,
+.info {
+ width: 50%;
+}
+
+.image {
+ display: block;
+ width: 100%;
+ height: 40vh;
+ object-fit: contain;
+ transition: transform 0.5s ease;
+ &:hover {
+ cursor: pointer;
+ transform: scale(1.1);
+ }
+}
+
+.images_container {
+ display: flex;
+ width: 60%;
+ margin-top: 20px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.images {
+ display: block;
+ width: 10%;
+ background-color: #ffffff;
+ height: 25vh;
+ object-fit: cover;
+}
+
+.name_thing,
+.description {
+ color: $secondaryTextColor;
+}
+
+.name_thing {
+ margin-top: 0px;
+ font-size: 2.4rem;
+ @include media-1000 {
+ text-align: center;
+ }
+}
+
+.description {
+ font-size: 1.6rem;
+ line-height: 2.5rem;
+}
+
+.container_images {
+ @include media-1200 {
+ width: 65%;
+ }
+ @include media-1000 {
+ width: 80%;
+ margin: 0 auto;
+ }
+ @include media-600 {
+ width: 90%;
+ }
+
+ @include media-400 {
+ width: 100%;
+ }
+}
+
+.info {
+ @include media-1200 {
+ width: 45%;
+ }
+ @include media-1000 {
+ width: 100%;
+ margin-top: 30px;
+ }
+}
+
+.price {
+ font-size: 2rem;
+ color: $secondaryTextColor;
+ margin-bottom: 0px;
+}
+.prices {
+ display: flex;
+ gap: 10%;
+}
+
+.price_start,
+.price_finish {
+ font-size: 2rem;
+ font-weight: 700;
+ margin-top: 10px;
+}
+.price_start {
+ color: $secondaryTextColor;
+}
+.price_sale {
+ text-decoration: line-through;
+}
+.price_finish {
+ color: $priceSale;
+}
+
+.background {
+ position: fixed;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ background-color: rgba(64, 63, 61, 0.9);
+}
+
+.modal_image {
+ display: block;
+ width: 80%;
+ height: 90vh;
+ margin: 0 auto;
+ object-fit: contain;
+ @include media-800 {
+ width: 90%;
+ }
+ @include media-600 {
+ width: 100%;
+ }
+}
+
+.images_container2 {
+ margin-left: auto;
+ margin-right: auto;
+ width: 50%;
+ height: 60%;
+ @include media-1200 {
+ width: 60%;
+ }
+ @include media-800 {
+ width: 70%;
+ }
+ @include media-600 {
+ width: 100%;
+ }
+}
+
+.images2 {
+ display: block;
+ width: 90%;
+ height: 90vh;
+ object-fit: cover;
+}
+
+.images_container2 > ul > li > button::before {
+ color: #ffffff;
+}
diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
new file mode 100644
index 0000000..04b175f
--- /dev/null
+++ b/src/components/card/Card.tsx
@@ -0,0 +1,231 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import style from 'src/components/card/Card.module.scss';
+import { Layout } from 'src/components/layout/Layout.tsx';
+import { apiRoot } from 'src/services/api/ctpClient.ts';
+import { Modal } from 'src/components/modalWindow/modalImage.tsx';
+import { Paragraph } from 'src/components/text/Text.tsx';
+import { getCurrencySymbol } from 'src/utils/CurrencyUtils.ts';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import { ProductCatalogData } from '@commercetools/platform-sdk';
+
+interface Image {
+ url: string;
+}
+
+interface IProductData {
+ id: string;
+ masterData: ProductCatalogData;
+}
+
+export const CardOne: React.FC = () => {
+ const [product, setProduct] = useState{title}
+
+
+
+
+ {error}
}
+ {product && (
+
+
+ )}
+ {product && selectedImage && modal && (
+
+ {
+ handleImageChange(isImages[currentSlide], selectedIndex);
+ }}
+ >
+ {product.masterData.staged.masterVariant.images?.map((image) => (
+ ![{product.masterData.current.name['en-US']}]({image.url})
+ ))}
+
+ )}
+
+
+ {selectedImage && (
+
+ {isLength && (
+ {
+ if (event.key === 'Enter' || event.key === ' ') {
+ showModalWindow();
+ }
+ }}
+ >
+ ![{product.masterData.current.name['en-US']}]({selectedImage.url})
+
+ )}
+
+
+
+ {isFirstPrice?.[0].discounted ? (
+ <>
+
+
+ {products.map((product) => {
+ const priceObj = product.masterVariant.prices?.[0].value;
+ const priceDiscountObj = product.masterVariant.prices?.[0].discounted?.value;
+
+ const centAmount = priceObj?.centAmount;
+ const centAmountDiscount = priceDiscountObj?.centAmount;
+ const currencyCode = priceObj?.currencyCode;
+ const currencySymbol = getCurrencySymbol(currencyCode) ?? '';
+ const price =
+ centAmount !== undefined ? `${currencySymbol}${(centAmount / 100).toFixed(2)}` : '';
+
+ const priceDiscount =
+ centAmountDiscount !== undefined
+ ? `${currencySymbol}${(centAmountDiscount / 100).toFixed(2)}`
+ : '';
+
+ const priceStartClass = centAmountDiscount
+ ? `${style1.price_start} ${style1.price_sale}`
+ : style1.price_start;
+
+ return (
+
+
+ );
+};
diff --git a/src/components/category/Category.module.scss b/src/components/category/Category.module.scss
new file mode 100644
index 0000000..32e84a6
--- /dev/null
+++ b/src/components/category/Category.module.scss
@@ -0,0 +1,41 @@
+.category_container {
+ display: flex;
+ margin-top: 10px;
+ justify-content: center;
+ flex-direction: column;
+ font-size: 1.6rem;
+}
+
+.category {
+ display: flex;
+ flex-direction: column;
+ cursor: pointer;
+ margin: 5px;
+}
+
+.category_parent {
+ display: flex;
+ flex-direction: column;
+ cursor: pointer;
+}
+
+.subcategory {
+ margin-left: 30px;
+ cursor: pointer;
+ padding: 5px;
+}
+
+.category:hover,
+.subcategory:hover {
+ color: orange;
+}
+
+@media (max-width: 500px) {
+ .category_container {
+ font-size: 1.2rem;
+ }
+
+ .subcategory {
+ margin-left: 15px;
+ }
+}
diff --git a/src/components/category/Category.tsx b/src/components/category/Category.tsx
new file mode 100644
index 0000000..2aa85a7
--- /dev/null
+++ b/src/components/category/Category.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import style from 'src/components/category/Category.module.scss';
+
+interface CategoryComponentProps {
+ onCategoryClick: (category: string) => void;
+ selectedCategory: string;
+}
+
+const categories = [
+ { name: 'Decor', isSubcategory: false },
+ { name: 'Wall Decor', isSubcategory: true },
+ { name: 'X-mas', isSubcategory: true },
+ { name: 'Toys', isSubcategory: false },
+ { name: 'Food', isSubcategory: false },
+ { name: 'Jar', isSubcategory: true },
+ { name: 'All category', isSubcategory: false },
+];
+
+export const CategoryComponent: React.FC
+ ![{product.name['en-US']}]({product.masterVariant.images?.[0].url})
+
+
+
+
+
+
+ );
+ })}
+
+
+);
diff --git a/src/components/checkbox/Checkbox.module.scss b/src/components/checkbox/Checkbox.module.scss
new file mode 100644
index 0000000..1c594cd
--- /dev/null
+++ b/src/components/checkbox/Checkbox.module.scss
@@ -0,0 +1,39 @@
+.custom_checkbox {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ input[type='checkbox'] {
+ appearance: none;
+ width: 20px;
+ height: 20px;
+ outline: none;
+ margin: 0 10px 0 0;
+ }
+ label {
+ height: 20px;
+ }
+}
+
+.custom_checkbox input[type='checkbox']::before {
+ content: '';
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ border: 1px solid var(--primary-text-color);
+ border-radius: 4px;
+ background-color: white;
+}
+
+.custom_checkbox input[type='checkbox']:checked:disabled::before,
+.custom_checkbox input[type='checkbox']:disabled::before {
+ background-color: var(--background-color);
+}
+
+.custom_checkbox input[type='checkbox']:checked::before {
+ background-color: var(--background-color);
+ border-color: var(--primary-text-color);
+ outline: none;
+ content: '\2713';
+ background-color: white;
+}
diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx
new file mode 100644
index 0000000..48c839b
--- /dev/null
+++ b/src/components/checkbox/Checkbox.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import style from 'src/components/checkbox/Checkbox.module.scss';
+
+interface CheckboxProps {
+ label: string;
+ checked: boolean;
+ id: string;
+ onChange?: (checked: boolean) => void;
+ disabledMode?: boolean;
+}
+
+export const Checkbox: React.FCCategory:
+
+ {categories.map((category) => (
+
+ {
+ onCategoryClick(category.name);
+ }}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter') onCategoryClick(category.name);
+ }}
+ >
+ {selectedCategory === category.name && '● '}
+ {category.name}
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/src/components/country/country.ts b/src/components/country/country.ts
new file mode 100644
index 0000000..e29260c
--- /dev/null
+++ b/src/components/country/country.ts
@@ -0,0 +1,14 @@
+export enum Country {
+ France = 'FR',
+ Germany = 'DE',
+ Italy = 'IT',
+ Netherlands = 'NL',
+ Underfined = '...',
+}
+
+export const countryLookup: Record
+
+ );
+};
diff --git a/src/components/filter/FilterComponent.tsx b/src/components/filter/FilterComponent.tsx
new file mode 100644
index 0000000..e96c761
--- /dev/null
+++ b/src/components/filter/FilterComponent.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import style from './Filter.module.scss';
+
+export interface FilterOption {
+ label: string;
+ value: string;
+}
+
+interface FilterComponentProps {
+ options: FilterOption[];
+ title: string;
+ type: 'checkbox' | 'radio';
+ handleChange?(event: React.ChangeEventProduct Filters
+
+
+ );
+};
diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
new file mode 100644
index 0000000..3207d8d
--- /dev/null
+++ b/src/components/form/form.tsx
@@ -0,0 +1,152 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import styles from 'src/logic/loginPage/loginPage.module.scss';
+import myStyles from 'src/components/form/registration/RegistrationForm.module.scss';
+import { validateEmail, validatePassword } from 'src/components/validation/Validation.ts';
+
+import { myStatus } from 'src/components/tempFolderForDevelop/statusHandler.ts';
+import { IResponse, myRedirect } from 'src/components/tempFolderForDevelop/responseHandler.ts';
+import { ModalWindow } from 'src/components/modalWindow/modalWindow.tsx';
+import { useNavigate } from 'react-router-dom';
+import { Paragraph } from 'src/components/text/Text.tsx';
+import { Link } from 'src/components/link/Link.tsx';
+import { loginRequest } from 'src/services/api/loginRequest.ts';
+import { saveCredentials } from 'src/services/userData/saveEmailPassword.ts';
+
+export const Form = () => {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [errorEmail, setErrorEmail] = useState('');
+ const [errorPassword, setErrorPassword] = useState('');
+ const [showModal, setShowModal] = useState(false);
+ const [modalData, setModalData] = useState{title}
+
+ {options.map((option) => (
+
+
+
+
+
+ ))}
+
+
+
+ {modalData.message &&
+
+ Add New Address
+
+
+ {!isEditAddress && (
+
+ )}
+
+ {isEditAddress && (
+
+ )}
+ {isEditAddress && (
+
+ )}
+
+
+
+ Your Addresses
+ {addresses + .slice() + .reverse() + .map((address) => ( +
+
+ ))}
+
+
+
+
+
+
+
+
+
+ {!isEditAddress && (
+
+ )}
+
+
+
+
+
+
+ street name:
+
+ {address.streetName}
+
+ city:
+
+ {address.city}
+
+ postal code:
+
+ {address.postalCode}
+
+ country:
+
+ {countryLookup[address.country]}
+
+
+
+ {modalData.message &&
+
+ {isOldPasswordCorrect && (
+
+ )}
+
+ );
+};
diff --git a/src/components/form/profile/IPasswordForm.ts b/src/components/form/profile/IPasswordForm.ts
new file mode 100644
index 0000000..82c6891
--- /dev/null
+++ b/src/components/form/profile/IPasswordForm.ts
@@ -0,0 +1,11 @@
+export interface IPasswordForm {
+ oldPassword: string;
+ newPassword: string;
+ confirmPassword: string;
+}
+
+export const passwordForm: IPasswordForm = {
+ oldPassword: '',
+ newPassword: '',
+ confirmPassword: '',
+};
diff --git a/src/components/form/profile/UseModalEffect.ts b/src/components/form/profile/UseModalEffect.ts
new file mode 100644
index 0000000..3bb3637
--- /dev/null
+++ b/src/components/form/profile/UseModalEffect.ts
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+const useModalEffect = (
+ modalData: { status: string; message: string },
+ setModalData: React.Dispatch
+ {
+ handleChange(e);
+ }}
+ required
+ error={errors.oldPassword}
+ />
+
+
+ {
+ handleChange(e);
+ isConfirmPassword();
+ }}
+ required
+ error={errors.newPassword}
+ disabledMode={isDisabledPassword}
+ />
+
+ {
+ handleChange(e);
+ isConfirmPassword();
+ }}
+ required
+ error={errors.confirmPassword}
+ disabledMode={isDisabledPassword}
+ />
+
+ {modalData.message &&
+
+ );
+};
diff --git a/src/components/form/registration/RegistrationForm.module.scss b/src/components/form/registration/RegistrationForm.module.scss
new file mode 100644
index 0000000..96bd975
--- /dev/null
+++ b/src/components/form/registration/RegistrationForm.module.scss
@@ -0,0 +1,106 @@
+@import 'src/styles/mixins';
+@import 'src/styles/variables';
+
+.registration {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ height: 100vw;
+ background-color: var(--background-color);
+ font-size: 1.3rem;
+ flex-wrap: nowrap;
+ align-content: center;
+ input {
+ width: 400px;
+ }
+}
+
+.submitButton {
+ background-color: var(--register-button);
+ border-radius: 0.5rem;
+ height: auto;
+ padding: 0.5rem 0;
+ letter-spacing: 0.05rem;
+ border: 1px solid var(--background-color);
+ color: var(--background-color);
+ font-weight: 600;
+ cursor: pointer;
+ margin: 20px auto;
+ padding: 10px 65px;
+}
+
+.submitButton:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.register_text {
+ font-size: 1.2rem;
+ font-weight: 700;
+ color: $secondaryTextColor;
+}
+
+.login_link {
+ display: inline-block;
+ padding: 10px 75px;
+ background-color: $primaryBackgroundButton;
+ color: $secondaryTextColor;
+ font-size: 1.6rem;
+ font-weight: 700;
+ justify-self: center;
+ align-self: center;
+ margin-bottom: 20px;
+ border-radius: 0.5rem;
+
+ &:hover {
+ background-color: $primaryBackgroundButtonHover;
+ transition: background-color 0.3s ease;
+ color: $secondaryTextColor;
+ }
+
+ &:active {
+ background-color: $primaryBackgroundButtonActive;
+ }
+}
+
+.myLabel {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ font-size: 1.3rem;
+ color: hsla(0, 63%, 3%, 0.564);
+}
+
+.myInput {
+ outline: none;
+ width: 20px;
+}
+
+.myButton {
+ outline: none;
+ background-color: #d6b258;
+ cursor: pointer;
+}
+
+.myButton:hover {
+ background-color: #f0ac00;
+}
+
+.myButton:active {
+ background-color: #f0ca00;
+}
+
+.myInput_header {
+ position: relative;
+ top: 15px;
+ font-size: 1.4rem;
+ color: var(--primary-text-color);
+}
+
+@media (width < 650px) {
+ .registration {
+ input {
+ width: 300px;
+ }
+ }
+}
diff --git a/src/components/form/registration/RegistrationForm.tsx b/src/components/form/registration/RegistrationForm.tsx
new file mode 100644
index 0000000..ba6050a
--- /dev/null
+++ b/src/components/form/registration/RegistrationForm.tsx
@@ -0,0 +1,326 @@
+import React, { useEffect, useState, useContext } from 'react';
+import style from 'src/components/form/registration/RegistrationForm.module.scss';
+import { AddressForm } from 'src/components/address/Address.tsx';
+import { validateField } from 'src/components/validation/Validation.ts';
+import { validatePostalCode } from 'src/components/validation/PostalCodeValidation.ts';
+import { Country } from 'src/components/country/country.ts';
+import { Paragraph } from 'src/components/text/Text.tsx';
+import { Link } from 'src/components/link/Link.tsx';
+import { BaseAddress, CustomerDraft } from '@commercetools/platform-sdk';
+import { apiRoot } from 'src/services/api/ctpClient.ts';
+import { useNavigate } from 'react-router-dom';
+import { v4 as uuidv4 } from 'uuid';
+
+import { loginRequest } from 'src/services/api/loginRequest.ts';
+import { saveCredentials } from 'src/services/userData/saveEmailPassword.ts';
+import { createCustomer } from 'src/services/api/registrationCustomer.ts';
+import { ServerError } from 'src/utils/error/RequestErrors.ts';
+import { ModalWindow } from 'src/components/modalWindow/modalWindow.tsx';
+import { BillingAddressForm } from 'src/components/address/BillingAddress.tsx';
+
+import { customerModel, ICustomerModel } from 'src/model/Customer.ts';
+import { CurrentUserContext } from 'src/App.tsx';
+import { RegistrationMainFields } from './RegistrationMainFields.tsx';
+
+let countryShipping: Country;
+let countryBilling: Country;
+
+const requiredFields: (keyof ICustomerModel)[] = [
+ 'email',
+ 'password',
+ 'firstName',
+ 'lastName',
+ 'dateOfBirth',
+];
+
+export const RegistrationForm: React.FC = () => {
+ const context = useContext(CurrentUserContext);
+
+ if (!context) {
+ throw new Error('RegistrationForm must be used within a CurrentUserContext.Provider');
+ }
+
+ const { setCurrentUser } = context;
+ const [formData, setFormData] = useState(customerModel);
+
+ const [errors, setErrors] = useState(customerModel);
+
+ const [isFormValid, setIsFormValid] = useState(false);
+
+ const popupMessage = { status: '', message: '' };
+
+ const [modalData, setModalData] = useState(popupMessage);
+
+ const navigation = useNavigate();
+
+ countryShipping = Country[formData.country as keyof typeof Country];
+ countryBilling = Country[formData.billingCountry as keyof typeof Country];
+
+ const handleDefaultAddress = (checked: boolean) => {
+ setFormData({
+ ...formData,
+ isShippingDefaultAddress: checked,
+ });
+ };
+ const handleBillingAddress = (checked: boolean) => {
+ setFormData({
+ ...formData,
+ isBillingDefaultAddress: checked,
+ });
+ };
+
+ const validateOneField = (name: string, value: string) => {
+ const error = validateField(name, value, countryShipping, countryBilling);
+ const errorValidate = error === '' ? '' : error;
+ setErrors({
+ ...errors,
+ [name]: errorValidate,
+ });
+ };
+
+ const handleSameAddress = (checked: boolean) => {
+ setFormData((prevFormData) => ({
+ ...prevFormData,
+ isEqualAddress: checked,
+ ...(checked && {
+ billingStreet: prevFormData.streetName,
+ billingCity: prevFormData.city,
+ billingCountry: prevFormData.country,
+ billingPostalCode: prevFormData.postalCode,
+ }),
+ }));
+ };
+
+ useEffect(() => {
+ if (formData.isEqualAddress) {
+ const billingAddressFields: string[] = [
+ 'billingStreet',
+ 'billingCity',
+ 'billingCountry',
+ 'billingPostalCode',
+ ];
+ billingAddressFields.forEach((field) => {
+ if (typeof formData[field] === 'string') {
+ const value = formData[field] as string;
+ const error = validateField(field, value, countryShipping, countryBilling);
+ const errorValidate = error === '' ? '' : error;
+ setErrors((prevErrors) => ({
+ ...prevErrors,
+ [field]: errorValidate,
+ }));
+ }
+ });
+ }
+ }, [formData.isEqualAddress, formData]);
+
+ const handleChange = (event: React.ChangeEvent
+
+
+
+
+ {handleSwitchTab()}
+ {modalData.message &&
+ {showFields.email && (
+
+ );
+};
diff --git a/src/components/header/Header.module.scss b/src/components/header/Header.module.scss
new file mode 100644
index 0000000..b1cff48
--- /dev/null
+++ b/src/components/header/Header.module.scss
@@ -0,0 +1,120 @@
+@import 'src/styles/variables';
+@import 'src/styles/mixins';
+
+.header,
+.navigation {
+ display: flex;
+ justify-content: space-between;
+}
+
+.header {
+ background-color: rgba(255, 255, 255);
+ position: sticky;
+ top: 0;
+ width: 100%;
+
+ &.hidden {
+ display: none;
+ }
+}
+
+.container {
+ display: flex;
+ height: 100%;
+ width: 90%;
+ margin: 0 auto;
+ justify-content: space-between;
+
+ @include media-600 {
+ flex-direction: column;
+ }
+}
+
+.navigation {
+ width: 27%;
+ align-items: end;
+
+ @include media-1200 {
+ width: 32%;
+ }
+
+ @include media-1000 {
+ width: 40%;
+ }
+
+ @include media-800 {
+ width: 55%;
+ }
+
+ @include media-600 {
+ width: 63%;
+ }
+
+ @include media-500 {
+ width: 80%;
+ }
+
+ @include media-400 {
+ width: 90%;
+ }
+}
+
+.login_container {
+ display: flex;
+ &.hidden {
+ display: none;
+ }
+}
+
+.logout_container {
+ display: flex;
+}
+
+.logo,
+.logout,
+.link {
+ color: $secondaryTextColor;
+ &:hover {
+ cursor: pointer;
+ transition-duration: 1s;
+ }
+}
+
+.logo {
+ font-size: 3.2rem;
+ &.inactive:hover {
+ cursor: auto;
+ color: $secondaryTextColor;
+ }
+ @include media-600 {
+ margin-left: 5px;
+ }
+}
+
+.logout {
+ &:hover {
+ color: var(--hover-text-color);
+ cursor: pointer;
+ }
+}
+
+.link,
+.logout {
+ display: flex;
+ height: 100%;
+ font-size: 1.6rem;
+ align-items: flex-end;
+ padding: 5px 10px 0 10px;
+}
+
+.link.active,
+.logout.active {
+ color: $secondaryActiveLink;
+ text-decoration: underline;
+ transition-duration: 1s;
+
+ &:hover {
+ color: $secondaryActiveLink;
+ cursor: auto;
+ }
+}
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
new file mode 100644
index 0000000..94b9a35
--- /dev/null
+++ b/src/components/header/Header.tsx
@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import styles from 'src/components/header/Header.module.scss';
+import { Link } from 'components/link/Link.tsx';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Form } from 'src/components/form/form.tsx';
+
+const links = [
+ {
+ to: '/login',
+ title: 'LOG IN',
+ id: 1,
+ },
+ {
+ to: '/register',
+ title: 'REGISTER',
+ id: 2,
+ },
+];
+
+export const Header: React.FC = () => {
+ const location = useLocation().pathname;
+ const navigation = useNavigate();
+ const [activeLink, setActiveLink] = useState
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/input/InputWithLabel.tsx b/src/components/input/InputWithLabel.tsx
new file mode 100644
index 0000000..a6e1553
--- /dev/null
+++ b/src/components/input/InputWithLabel.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import style from 'src/components/address/Address.module.scss';
+
+interface InputProps {
+ id: string;
+ type: string;
+ name: string;
+ label: string;
+ value: string | undefined;
+ onChange: (event: React.ChangeEvent
+
+
+ {error && (
+
+ );
+};
diff --git a/src/components/layout/Layout.module.scss b/src/components/layout/Layout.module.scss
new file mode 100644
index 0000000..ea0a514
--- /dev/null
+++ b/src/components/layout/Layout.module.scss
@@ -0,0 +1,11 @@
+@import 'src/styles/variables';
+.layout {
+ width: inherit;
+ background-image: url('../../public/main_image2.jpg');
+ background-repeat: no-repeat;
+ background-size: cover;
+ display: flex;
+ background-position: center;
+ width: 100%;
+ height: 70vh;
+}
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
new file mode 100644
index 0000000..6946363
--- /dev/null
+++ b/src/components/layout/Layout.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface LayoutProps {
+ children: React.ReactNode;
+ className: string;
+}
+
+export const Layout: React.FC
+ {error}
+
+ )}
+ {children}
;
+};
diff --git a/src/components/link/Link.tsx b/src/components/link/Link.tsx
new file mode 100644
index 0000000..a971d8b
--- /dev/null
+++ b/src/components/link/Link.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+interface LinkProps {
+ to: string;
+ title?: string;
+ className: string;
+ children?: React.ReactNode;
+ id?: string;
+ onClick?: () => void;
+}
+
+export const Link: React.FC
+
+ );
+};
diff --git a/src/components/modalWindow/modalWindow.module.scss b/src/components/modalWindow/modalWindow.module.scss
new file mode 100644
index 0000000..da62d57
--- /dev/null
+++ b/src/components/modalWindow/modalWindow.module.scss
@@ -0,0 +1,29 @@
+.parent {
+ width: 100%;
+ height: 95%;
+ position: fixed;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-start;
+ top: 50px;
+ left: -10px;
+}
+
+.children {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 10px;
+ font-size: 16px;
+ padding: 10px;
+ background-color: rgba(94, 94, 94, 0.192);
+}
+
+.children.error {
+ background-color: red;
+}
+
+.children.positive {
+ background-color: green;
+}
diff --git a/src/components/modalWindow/modalWindow.tsx b/src/components/modalWindow/modalWindow.tsx
new file mode 100644
index 0000000..5e4e595
--- /dev/null
+++ b/src/components/modalWindow/modalWindow.tsx
@@ -0,0 +1,31 @@
+import styles from 'src/components/modalWindow/modalWindow.module.scss';
+import { IResponse } from 'src/components/tempFolderForDevelop/responseHandler.ts';
+import PropTypes from 'prop-types';
+import { ErrorType } from 'src/utils/error/RequestErrors.ts';
+
+interface ModalWindowProps {
+ data: IResponse;
+}
+
+const ModalWindow: React.FC
+ {children}
+
+ {
+ if (event.key === 'Enter' || event.key === ' ') {
+ closeModalWindow();
+ }
+ }}
+ >
+ 
+
+
+
+ );
+};
+
+ModalWindow.propTypes = {
+ data: PropTypes.shape({
+ status: PropTypes.string.isRequired,
+ message: PropTypes.string.isRequired,
+ }).isRequired,
+};
+
+export { ModalWindow };
diff --git a/src/components/router/Router.tsx b/src/components/router/Router.tsx
new file mode 100644
index 0000000..2b39801
--- /dev/null
+++ b/src/components/router/Router.tsx
@@ -0,0 +1,26 @@
+import { RegistrationPage } from 'src/logic/registrationPage/registrationPage.tsx';
+import { Main } from 'src/logic/mainPage/MainPage.tsx';
+import { Login } from 'src/logic/loginPage/LoginPage.tsx';
+import { Error } from 'src/logic/errorPage/ErrorPage.tsx';
+import { Catalog } from 'src/logic/catalogPage/CatalogPage.tsx';
+import { UserProfilePage } from 'src/logic/userProfilePage/UserProfilePage.tsx';
+import { Product } from 'src/logic/productPage/Product.tsx';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Header } from 'src/components/header/Header.tsx';
+
+export const Router = () => {
+ return (
+
+ {status}
+ {message}
+
+
+
+
+ );
+};
diff --git a/src/components/selector/Selector.tsx b/src/components/selector/Selector.tsx
new file mode 100644
index 0000000..38cc99b
--- /dev/null
+++ b/src/components/selector/Selector.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+interface Option {
+ value: string | undefined;
+ label: string;
+}
+
+interface SelectorProps {
+ id: string;
+ name: string;
+ value: string | undefined;
+ label: string;
+ options: Option[];
+ onChange: React.ChangeEventHandler
+
+
+
+ {error &&
+ );
+};
+
+export default Selector;
diff --git a/src/components/sort/Sort.module.scss b/src/components/sort/Sort.module.scss
new file mode 100644
index 0000000..bbf1f1f
--- /dev/null
+++ b/src/components/sort/Sort.module.scss
@@ -0,0 +1,18 @@
+.sort_container {
+ display: flex;
+ align-items: center;
+ margin-top: 20px;
+}
+
+.form_container {
+ display: flex;
+ flex-direction: column;
+ font-size: 16px;
+ width: 100%;
+}
+
+.select_sort {
+ margin-right: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
diff --git a/src/components/sort/Sort.tsx b/src/components/sort/Sort.tsx
new file mode 100644
index 0000000..54a974a
--- /dev/null
+++ b/src/components/sort/Sort.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import style from 'src/components/sort/Sort.module.scss';
+
+interface SortComponentProps {
+ onSort: (criteria: string) => void;
+ defaultCriteria?: string;
+}
+
+export const SortComponent: React.FC{error}
}
+
+
+
+ );
+};
diff --git a/src/components/tempFolderForDevelop/responseHandler.ts b/src/components/tempFolderForDevelop/responseHandler.ts
new file mode 100644
index 0000000..167ac73
--- /dev/null
+++ b/src/components/tempFolderForDevelop/responseHandler.ts
@@ -0,0 +1,14 @@
+export interface IResponse {
+ status: string;
+ message: string;
+}
+
+export const myRedirect = (res: IResponse) => {
+ if (res.status === 'Success') {
+ return 'Success';
+ }
+ if (res.status === 'Invalid') {
+ return 'Invalid';
+ }
+ return '';
+};
diff --git a/src/components/tempFolderForDevelop/statusHandler.ts b/src/components/tempFolderForDevelop/statusHandler.ts
new file mode 100644
index 0000000..5cc744c
--- /dev/null
+++ b/src/components/tempFolderForDevelop/statusHandler.ts
@@ -0,0 +1,17 @@
+export const myStatus = (status: boolean, message: string) => {
+ const obj = {
+ status: '',
+ message: '',
+ };
+
+ if (status) {
+ obj.status = 'Success';
+ obj.message = message;
+ // obj.message = 'Login successful!';
+ } else {
+ obj.status = 'Invalid';
+ obj.message = message;
+ // obj.message = 'Incorrect email or password!';
+ }
+ return obj;
+};
diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx
new file mode 100644
index 0000000..b626581
--- /dev/null
+++ b/src/components/text/Text.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+type Tags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+
+interface ParagraphProps {
+ tag: Tags;
+ title: string;
+ className: string;
+}
+
+export const Paragraph: React.FC{errorState}
}
+
+
+
+
+ );
+};
diff --git a/src/logic/errorPage/ErrorPage.module.scss b/src/logic/errorPage/ErrorPage.module.scss
new file mode 100644
index 0000000..f1773b9
--- /dev/null
+++ b/src/logic/errorPage/ErrorPage.module.scss
@@ -0,0 +1,56 @@
+@import 'src/styles/variables';
+@import 'src/styles/mixins';
+
+.error_container {
+ background-image: url('../../public/error.jpg');
+ display: flex;
+ flex-direction: column;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 100%;
+ height: 100vh;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+}
+
+.error_link,
+.error_text,
+.error_title {
+ color: $secondaryTextColor;
+}
+
+.error_title,
+.error_text {
+ text-align: center;
+}
+
+.error_title {
+ font-size: 6.4rem;
+ margin: 0;
+}
+
+.error_text {
+ font-size: 2.4rem;
+}
+
+.error_link {
+ display: inline-block;
+ padding: 10px 20px;
+ background-color: $primaryBackgroundButton;
+ border-radius: 10px;
+ font-size: 1.6rem;
+ justify-self: center;
+ align-self: center;
+
+ &:hover {
+ background-color: $primaryBackgroundButtonHover;
+ transition: background-color 0.3s ease;
+ color: $secondaryTextColor;
+ }
+
+ &:active {
+ background-color: $primaryBackgroundButtonActive;
+ }
+}
diff --git a/src/logic/errorPage/ErrorPage.tsx b/src/logic/errorPage/ErrorPage.tsx
new file mode 100644
index 0000000..374900c
--- /dev/null
+++ b/src/logic/errorPage/ErrorPage.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link } from 'src/components/link/Link.tsx';
+import { Layout } from 'src/components/layout/Layout.tsx';
+import { Paragraph } from 'src/components/text/Text.tsx';
+import style from 'src/logic/errorPage/ErrorPage.module.scss';
+
+export const Error: React.FC = () => {
+ return (
+
+
+
+
+ );
+};
+
+export { Login };
diff --git a/src/logic/loginPage/loginPage.module.scss b/src/logic/loginPage/loginPage.module.scss
new file mode 100644
index 0000000..12e2609
--- /dev/null
+++ b/src/logic/loginPage/loginPage.module.scss
@@ -0,0 +1,74 @@
+@import '../../styles/mixins';
+@import 'src/styles/variables';
+
+.container_login {
+ display: flex;
+ background-image: url('../../public/login-bg.jpeg');
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 100%;
+ height: 100vh;
+ justify-content: center;
+ align-items: center;
+ color: black;
+}
+
+.login {
+ @include form(0.6);
+}
+
+.form {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ margin: 50px auto;
+ width: 200px;
+ > span {
+ width: 300px;
+ }
+}
+
+.error {
+ color: red;
+ font-size: 1.4rem;
+ white-space: pre-wrap;
+}
+
+.login_text {
+ font-size: 1.6rem;
+ font-weight: 700;
+}
+
+.login_link {
+ display: inline-block;
+ padding: 10px 58px;
+ background-color: $primaryBackgroundButton;
+ border-radius: 0.5rem;
+ color: $secondaryTextColor;
+ font-size: 1.6rem;
+ font-weight: 700;
+ justify-self: center;
+ align-self: center;
+
+ &:hover {
+ background-color: $primaryBackgroundButtonHover;
+ transition: background-color 0.3s ease;
+ color: $secondaryTextColor;
+ }
+
+ &:active {
+ background-color: $primaryBackgroundButtonActive;
+ }
+}
+
+@media (width < 768px) {
+ .login {
+ width: 300px;
+ }
+ .form {
+ > span {
+ width: 200px;
+ }
+ }
+}
diff --git a/src/logic/mainPage/MainPAge.module.scss b/src/logic/mainPage/MainPAge.module.scss
new file mode 100644
index 0000000..42989fd
--- /dev/null
+++ b/src/logic/mainPage/MainPAge.module.scss
@@ -0,0 +1,4 @@
+.main {
+ width: inherit;
+ height: inherit;
+}
diff --git a/src/logic/mainPage/MainPage.tsx b/src/logic/mainPage/MainPage.tsx
new file mode 100644
index 0000000..dec0cc8
--- /dev/null
+++ b/src/logic/mainPage/MainPage.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Layout } from 'components/layout/Layout.tsx';
+import styles from 'src/logic/mainPage/MainPAge.module.scss';
+import style from 'components/layout/Layout.module.scss';
+
+export const Main: React.FC = () => {
+ return (
+
+
+
+