126 lines
5.0 KiB
TypeScript
126 lines
5.0 KiB
TypeScript
import { PageWrap } from '../../_shared/PageWrap'
|
||
import type { PageProps } from '../../types'
|
||
import styles from './Settings.module.scss'
|
||
import { Icon } from '../../_shared/Icon'
|
||
import { clsx } from 'clsx'
|
||
|
||
export const ProfileSettingsPage = (props: PageProps) => {
|
||
return (
|
||
<PageWrap>
|
||
<div class="wide-container">
|
||
<div class="shift-content">
|
||
<div class="left-col">
|
||
<div class="left-navigation">WIP</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-10 col-lg-9 col-xl-8">
|
||
<h1>Настройки профиля</h1>
|
||
<p class="description">Здесь можно настроить свой профиль так, как вы хотите.</p>
|
||
|
||
<form>
|
||
<h4>Аватар</h4>
|
||
<div class="pretty-form__item">
|
||
<div class={styles.avatarContainer}>
|
||
<img class={styles.avatar} />
|
||
<input
|
||
type="file"
|
||
name="avatar"
|
||
class={styles.avatarInput}
|
||
accept="image/jpeg,image/png,image/gif,image/webp"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<h4>Имя</h4>
|
||
<p class="description">
|
||
Ваше имя появится на странице вашего профиля и как ваша подпись
|
||
в публикациях, комментариях и откликах
|
||
</p>
|
||
<div class="pretty-form__item">
|
||
<input type="text" name="username" id="username" placeholder="Имя" />
|
||
<label for="username">Имя</label>
|
||
</div>
|
||
|
||
<h4>Адрес на Дискурсе</h4>
|
||
<div class="pretty-form__item">
|
||
<div class={styles.discoursName}>
|
||
<label for="user-address">https://discours.io/user/</label>
|
||
<div class={styles.discoursNameField}>
|
||
<input type="text" name="user-address" id="user-address" class="nolabel" />
|
||
<p class="form-message form-message--error">
|
||
Увы, этот адрес уже занят, выберите другой
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h4>Представление</h4>
|
||
<div class="pretty-form__item">
|
||
<textarea name="presentation" id="presentation" placeholder="Представление" />
|
||
<label for="presentation">Представление</label>
|
||
</div>
|
||
|
||
<h4>О себе</h4>
|
||
<div class="pretty-form__item">
|
||
<textarea name="about" id="about" placeholder="О себе" />
|
||
<label for="about">О себе</label>
|
||
</div>
|
||
|
||
<h4>Чем могу помочь/навыки</h4>
|
||
<div class="pretty-form__item">
|
||
<input type="text" name="skills" id="skills" />
|
||
</div>
|
||
|
||
<h4>Откуда</h4>
|
||
<div class="pretty-form__item">
|
||
<input type="text" name="location" id="location" placeholder="Откуда" />
|
||
<label for="location">Откуда</label>
|
||
</div>
|
||
|
||
<h4>Дата рождения</h4>
|
||
<div class="pretty-form__item">
|
||
<input
|
||
type="date"
|
||
name="birthdate"
|
||
id="birthdate"
|
||
placeholder="Дата рождения"
|
||
class="nolabel"
|
||
/>
|
||
</div>
|
||
|
||
<div class={clsx(styles.multipleControls, 'pretty-form__item')}>
|
||
<div class={styles.multipleControlsHeader}>
|
||
<h4>Социальные сети</h4>
|
||
<button class="button">+</button>
|
||
</div>
|
||
<div class={styles.multipleControlsItem}>
|
||
<input type="text" name="social1" class="nolabel" />
|
||
<button>
|
||
<Icon name="remove" class={styles.icon} />
|
||
</button>
|
||
</div>
|
||
<div class={styles.multipleControlsItem}>
|
||
<input type="text" name="social1" class="nolabel" />
|
||
<button>
|
||
<Icon name="remove" class={styles.icon} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<br />
|
||
<p>
|
||
<button class="button button--submit">Сохранить настройки</button>
|
||
</p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</PageWrap>
|
||
)
|
||
}
|
||
|
||
// for lazy loading
|
||
export default ProfileSettingsPage
|