Skip to content

Feat/order form component #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: feat/products-news
Choose a base branch
from
Open

Feat/order form component #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c19fe7f
feat: create OrderForm component
koonukaame Oct 1, 2024
a5f7561
refactor: remove form, add component instead
koonukaame Oct 1, 2024
48d0206
refactor: fix indentantion
koonukaame Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 115 additions & 0 deletions src/app/components/OrderForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: '[email protected]',
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;
87 changes: 87 additions & 0 deletions src/app/components/OrderForm/orderform.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%);
}
76 changes: 0 additions & 76 deletions src/app/wholesale/page.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -337,12 +267,6 @@

}

.wholesale-order__form::placeholder {
padding-left: 15px;
font-size: 16px;
color: rgba(41, 41, 41, 40%);
}

.bg {
background-color: #F7EBE5;
}
Expand Down
69 changes: 3 additions & 66 deletions src/app/wholesale/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = [
{
Expand Down Expand Up @@ -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='[email protected]'
/>
</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>
Expand Down