From c19fe7f86af81f758d46d391f3ae9cb3c7f365fc Mon Sep 17 00:00:00 2001
From: koonukaame <marialezhebokova@yandex.ru>
Date: Tue, 1 Oct 2024 15:02:20 +0300
Subject: [PATCH 1/3] feat: create OrderForm component

---
 src/app/components/OrderForm/index.tsx        | 115 ++++++++++++++++++
 .../components/OrderForm/orderform.module.css |  87 +++++++++++++
 2 files changed, 202 insertions(+)
 create mode 100644 src/app/components/OrderForm/index.tsx
 create mode 100644 src/app/components/OrderForm/orderform.module.css

diff --git a/src/app/components/OrderForm/index.tsx b/src/app/components/OrderForm/index.tsx
new file mode 100644
index 0000000..89d8cb3
--- /dev/null
+++ b/src/app/components/OrderForm/index.tsx
@@ -0,0 +1,115 @@
+import styles from './orderform.module.css';
+
+import Link from 'next/link';
+
+const forms = [
+  {
+    id: 0,
+    left: [{
+      title: 'Ваше имя*',
+      id: 'name',
+      type: 'text',
+      placeholder: 'Укажите имя',
+      pattern: undefined,
+      }, {
+      title: 'Ваш телефон*',
+      id: 'phone',
+      type: 'text',
+      placeholder: '+7 (___) ___-__-__',
+      pattern: '^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$',
+      },
+    ],
+  },
+  {
+    id: 1,
+    mid: [{
+      title: 'Название компании',
+      id: 'company',
+      type: 'text',
+      placeholder: 'Укажите имя',
+      pattern: undefined,
+      }, {
+      title: 'E-mail',
+      id: 'email',
+      type: 'email',
+      placeholder: 'example@domain.com',
+      pattern: undefined,
+      },
+    ],
+  },
+  {
+    id: 2,
+    right: [{
+      title: 'Добавить комментарий',
+      id: 'commentary',
+      type: 'text',
+      placeholder: undefined,
+      pattern: undefined,
+      },
+    ],
+  },
+]
+
+const OrderForm = () => {
+  return (
+    <div className={styles['wholesale-order']}>
+      <h3 className={styles['minor-heading']}>
+        Заказать расчёт или отправить запрос на сотрудничество
+      </h3>
+      <form action='' method='post' className={styles.form}>
+      <div className={styles['wholesale-order__contact-form']}>
+        {forms.map((form) => (
+          <div className={styles['contact-form__column']} key={form.id}>
+            {form.left?.map((el) => (
+              <div className={styles['column__container']} key={el.id}>
+                <label htmlFor={el.id}>{el.title}</label>
+                <input
+                  className={styles['wholesale-order__form']}
+                  id={el.id}
+                  type={el.type}
+                  placeholder={el.placeholder}
+                  pattern={el.pattern}
+                  required
+                />
+              </div>
+            ))}
+            {form.mid?.map((el) => (
+              <div className={styles['column__container']} key={el.id}>
+                <label htmlFor={el.id}>{el.title}</label>
+                <input
+                  className={styles['wholesale-order__form']}
+                  id={el.id}
+                  type={el.type}
+                  placeholder={el.placeholder}
+                  pattern={el.pattern}
+                />
+              </div>
+            ))}
+            {form.right?.map((el) => (
+              <div className={styles['column__container']} key={el.id}>
+                <label htmlFor={el.id}>{el.title}</label>
+                <input
+                  className={[styles['wholesale-order__form'], styles.commentary].join(' ')}
+                  id={el.id}
+                  type={el.type}
+                  placeholder={el.placeholder}
+                  pattern={el.pattern}
+                />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+      <button type='submit' className={styles['wholesale-order__btn']}>Заказать расчёт</button>
+      </form>
+      <div className={styles['wholesale-order__agreement']}>
+        <span>{'Нажимая на кнопку "Оформить заказ" Я принимаю и соглашаюсь с '}</span>
+        <span className={styles['agreement-link']}>{'Договором оферты '}</span>
+        <span>{'и разрешаю обработку моих персональных данных в соответствии с '}</span>
+        <Link href={'/privacy-policy'} className={styles.agreement_link}> Политикой конфиденциальности</Link>
+      </div>
+    </div>
+  )
+}
+
+export default OrderForm;
\ No newline at end of file
diff --git a/src/app/components/OrderForm/orderform.module.css b/src/app/components/OrderForm/orderform.module.css
new file mode 100644
index 0000000..01b5798
--- /dev/null
+++ b/src/app/components/OrderForm/orderform.module.css
@@ -0,0 +1,87 @@
+.wholesale-order {
+  padding: 76px 0px 76px 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 23px;
+}
+
+.minor-heading {
+  font-size: 30px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+  width: 100%;
+}
+
+.wholesale-order__contact-form {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+}
+
+.contact-form__column {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.column__container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.column__container label {
+  font-size: 13px;
+}
+
+.wholesale-order h3 {
+  width: 650px;
+  text-align: center;
+  padding-bottom: 40px;
+}
+
+.wholesale-order__form {
+  width: 370px;
+  height: 50px;
+  border: 1px solid #EDEDF0;
+  font-size: 16px;
+}
+
+.commentary {
+  height: 139px;
+}
+
+.wholesale-order__btn {
+  background-color: var(--accent);
+  color: #FFFFFF;
+  width: 254px;
+  height: 50px;
+  border: none;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 3px;
+  margin-top: 10px;
+  cursor: pointer;
+}
+
+.wholesale-order span {
+  font-size: 11px;
+}
+
+.agreement_link {
+  font-size: 12px;
+  color: var(--blue);
+  text-decoration: underline;
+}
+
+.wholesale-order__form::placeholder {
+  padding-left: 15px;
+  font-size: 16px;
+  color: rgba(41, 41, 41, 40%);
+}
\ No newline at end of file

From a5f7561ca2d5535b1ed35fce5c2f26ae22a28604 Mon Sep 17 00:00:00 2001
From: koonukaame <marialezhebokova@yandex.ru>
Date: Tue, 1 Oct 2024 15:04:48 +0300
Subject: [PATCH 2/3] refactor: remove form, add component instead

---
 src/app/wholesale/page.module.css | 76 -------------------------------
 src/app/wholesale/page.tsx        | 69 ++--------------------------
 2 files changed, 3 insertions(+), 142 deletions(-)

diff --git a/src/app/wholesale/page.module.css b/src/app/wholesale/page.module.css
index 4bafc83..2c110c0 100644
--- a/src/app/wholesale/page.module.css
+++ b/src/app/wholesale/page.module.css
@@ -145,76 +145,6 @@
   background-image: url(/svg/otherspheres.svg);
 }
 
-.wholesale-order {
-  padding: 76px 0px 76px 0px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 23px;
-}
-
-.wholesale-order__contact-form {
-  display: flex;
-  justify-content: space-around;
-  width: 100%;
-}
-
-.contact-form__column {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.column__container {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.column__container label {
-  font-size: 13px;
-}
-
-.wholesale-order h3 {
-  width: 650px;
-  text-align: center;
-  padding-bottom: 40px;
-}
-
-.wholesale-order__form {
-  width: 370px;
-  height: 50px;
-  border: 1px solid #EDEDF0;
-  font-size: 16px;
-}
-
-.commentary {
-  height: 139px;
-}
-
-.wholesale-order__btn {
-  background-color: var(--accent);
-  color: #FFFFFF;
-  width: 254px;
-  height: 50px;
-  border: none;
-  font-size: 14px;
-  font-weight: 600;
-  border-radius: 3px;
-  margin-top: 10px;
-  cursor: pointer;
-}
-
-.wholesale-order span {
-  font-size: 11px;
-}
-
-.agreement_link {
-  font-size: 12px;
-  color: var(--blue);
-  text-decoration: underline;
-}
-
 .wholesale-reviews {
   padding: 67px 0px 59px 0px;
   display: flex;
@@ -337,12 +267,6 @@
   
 }
 
-.wholesale-order__form::placeholder {
-  padding-left: 15px;
-  font-size: 16px;
-  color: rgba(41, 41, 41, 40%);
-}
-
 .bg {
   background-color: #F7EBE5;
 }
diff --git a/src/app/wholesale/page.tsx b/src/app/wholesale/page.tsx
index 997b824..18bb709 100644
--- a/src/app/wholesale/page.tsx
+++ b/src/app/wholesale/page.tsx
@@ -1,8 +1,9 @@
-import Link from 'next/link';
+// import Link from 'next/link';
 import Breadcrumb from '../shared/ui/Breadcrumb';
 import styles from './page.module.css';
 
 import Container from '@/app/components/Container';
+import OrderForm from '../components/OrderForm';
 
 const offers = [
   {
@@ -158,71 +159,7 @@ const Wholesale = () => {
       </Container>
       <div className={styles.bg}>
         <Container>
-          <div className={styles['wholesale-order']}>
-            <h3 className={styles['minor-heading']}>
-              Заказать расчёт или отправить запрос на сотрудничество
-            </h3>
-            <div className={styles['wholesale-order__contact-form']}>
-              <div className={styles['contact-form__column']}>
-                <div className={styles['column__container']}>
-                  <label htmlFor='name'>Ваше имя*</label>
-                  <input
-                    className={styles['wholesale-order__form']}
-                    id='name'
-                    type='text'
-                    placeholder='Укажите имя'
-                    required
-                  />
-                </div>
-                <div className={styles['column__container']}>
-                  <label htmlFor='phone'>Ваш телефон*</label>
-                  <input
-                    className={styles['wholesale-order__form']}
-                    type='tel'
-                    id='phone'
-                    placeholder='+7 (___) ___-__-__'
-                    pattern='^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$'
-                    required
-                  />
-                </div>
-              </div>
-              <div className={styles['contact-form__column']}>
-                <div className={styles['column__container']}>
-                  <label htmlFor='company'>Название компании</label>
-                  <input
-                    className={styles['wholesale-order__form']}
-                    type='text'
-                    id='company'
-                    placeholder='Укажите имя'
-                  />
-                </div>
-                <div className={styles['column__container']}>
-                  <label htmlFor='email'>E-mail</label>
-                  <input
-                    className={styles['wholesale-order__form']}
-                    type='email'
-                    id='email'
-                    placeholder='example@domain.com'
-                  />
-                </div>
-              </div>
-              <div className={styles['column__container']}>
-                <label htmlFor='commentary'>Добавить комментарий</label>
-                <input
-                  className={[styles['wholesale-order__form'], styles.commentary].join(' ')}
-                  type='text'
-                  id='commentary'
-                />
-              </div>
-            </div>
-            <button className={styles['wholesale-order__btn']}>Заказать расчёт</button>
-            <div className={styles['wholesale-order__agreement']}>
-              <span>{'Нажимая на кнопку "Оформить заказ" Я принимаю и соглашаюсь с '}</span>
-              <span className={styles['agreement-link']}>{'Договором оферты '}</span>
-              <span>{'и разрешаю обработку моих персональных данных в соответствии с '}</span>
-              <Link href={'/privacy-policy'} className={styles.agreement_link}> Политикой конфиденциальности</Link>
-            </div>
-          </div>
+            <OrderForm />
         </Container>
       </div>
       <Container>

From 48d02063ea8e7a668052f32cdb61ff80bea43161 Mon Sep 17 00:00:00 2001
From: koonukaame <marialezhebokova@yandex.ru>
Date: Wed, 2 Oct 2024 12:33:54 +0300
Subject: [PATCH 3/3] refactor: fix indentantion

---
 src/app/components/OrderForm/index.tsx | 98 +++++++++++++-------------
 1 file changed, 49 insertions(+), 49 deletions(-)

diff --git a/src/app/components/OrderForm/index.tsx b/src/app/components/OrderForm/index.tsx
index 89d8cb3..f8cde2f 100644
--- a/src/app/components/OrderForm/index.tsx
+++ b/src/app/components/OrderForm/index.tsx
@@ -11,13 +11,13 @@ const forms = [
       type: 'text',
       placeholder: 'Укажите имя',
       pattern: undefined,
-      }, {
+    }, {
       title: 'Ваш телефон*',
       id: 'phone',
       type: 'text',
       placeholder: '+7 (___) ___-__-__',
       pattern: '^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$',
-      },
+    },
     ],
   },
   {
@@ -28,13 +28,13 @@ const forms = [
       type: 'text',
       placeholder: 'Укажите имя',
       pattern: undefined,
-      }, {
+    }, {
       title: 'E-mail',
       id: 'email',
       type: 'email',
       placeholder: 'example@domain.com',
       pattern: undefined,
-      },
+    },
     ],
   },
   {
@@ -45,7 +45,7 @@ const forms = [
       type: 'text',
       placeholder: undefined,
       pattern: undefined,
-      },
+    },
     ],
   },
 ]
@@ -57,50 +57,50 @@ const OrderForm = () => {
         Заказать расчёт или отправить запрос на сотрудничество
       </h3>
       <form action='' method='post' className={styles.form}>
-      <div className={styles['wholesale-order__contact-form']}>
-        {forms.map((form) => (
-          <div className={styles['contact-form__column']} key={form.id}>
-            {form.left?.map((el) => (
-              <div className={styles['column__container']} key={el.id}>
-                <label htmlFor={el.id}>{el.title}</label>
-                <input
-                  className={styles['wholesale-order__form']}
-                  id={el.id}
-                  type={el.type}
-                  placeholder={el.placeholder}
-                  pattern={el.pattern}
-                  required
-                />
-              </div>
-            ))}
-            {form.mid?.map((el) => (
-              <div className={styles['column__container']} key={el.id}>
-                <label htmlFor={el.id}>{el.title}</label>
-                <input
-                  className={styles['wholesale-order__form']}
-                  id={el.id}
-                  type={el.type}
-                  placeholder={el.placeholder}
-                  pattern={el.pattern}
-                />
-              </div>
-            ))}
-            {form.right?.map((el) => (
-              <div className={styles['column__container']} key={el.id}>
-                <label htmlFor={el.id}>{el.title}</label>
-                <input
-                  className={[styles['wholesale-order__form'], styles.commentary].join(' ')}
-                  id={el.id}
-                  type={el.type}
-                  placeholder={el.placeholder}
-                  pattern={el.pattern}
-                />
-              </div>
-            ))}
-          </div>
-        ))}
-      </div>
-      <button type='submit' className={styles['wholesale-order__btn']}>Заказать расчёт</button>
+        <div className={styles['wholesale-order__contact-form']}>
+          {forms.map((form) => (
+            <div className={styles['contact-form__column']} key={form.id}>
+              {form.left?.map((el) => (
+                <div className={styles['column__container']} key={el.id}>
+                  <label htmlFor={el.id}>{el.title}</label>
+                  <input
+                    className={styles['wholesale-order__form']}
+                    id={el.id}
+                    type={el.type}
+                    placeholder={el.placeholder}
+                    pattern={el.pattern}
+                    required
+                  />
+                </div>
+              ))}
+              {form.mid?.map((el) => (
+                <div className={styles['column__container']} key={el.id}>
+                  <label htmlFor={el.id}>{el.title}</label>
+                  <input
+                    className={styles['wholesale-order__form']}
+                    id={el.id}
+                    type={el.type}
+                    placeholder={el.placeholder}
+                    pattern={el.pattern}
+                  />
+                </div>
+              ))}
+              {form.right?.map((el) => (
+                <div className={styles['column__container']} key={el.id}>
+                  <label htmlFor={el.id}>{el.title}</label>
+                  <input
+                    className={[styles['wholesale-order__form'], styles.commentary].join(' ')}
+                    id={el.id}
+                    type={el.type}
+                    placeholder={el.placeholder}
+                    pattern={el.pattern}
+                  />
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+        <button type='submit' className={styles['wholesale-order__btn']}>Заказать расчёт</button>
       </form>
       <div className={styles['wholesale-order__agreement']}>
         <span>{'Нажимая на кнопку "Оформить заказ" Я принимаю и соглашаюсь с '}</span>