first commit
This commit is contained in:
1
src/pages/profile/index.ts
Normal file
1
src/pages/profile/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { ProfilePage } from './ui/ProfilePage'
|
||||
156
src/pages/profile/ui/ProfilePage.module.css
Normal file
156
src/pages/profile/ui/ProfilePage.module.css
Normal file
@@ -0,0 +1,156 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-deep);
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: 1024px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 40px 32px 60px;
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
/* Desktop: avatar is left column, sections grow right */
|
||||
.profileTop {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sections {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.grid2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.grid1 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mnemonicRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.mnemonicInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mnemonicIcon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mnemonicText {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* < 1024px: column layout, avatar + userInfo side by side at top */
|
||||
@media (max-width: 1023px) {
|
||||
.main {
|
||||
flex-direction: column;
|
||||
padding: 24px 20px 40px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.grid2 {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.profileTop {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.userName {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.userBalance {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.userBalanceRub {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* < 650px: card padding 16px (в ProfileSection.module.css),
|
||||
кнопка мнемоники — 100% ширины */
|
||||
@media (max-width: 649px) {
|
||||
.mnemonicRow {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* < 640px: инпуты в колонку */
|
||||
@media (max-width: 639px) {
|
||||
.main {
|
||||
padding: 16px 16px 40px;
|
||||
}
|
||||
|
||||
.grid2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* < 550px: меньше текст и аватар */
|
||||
@media (max-width: 549px) {
|
||||
.profileTop {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.userName {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.userBalance {
|
||||
font-size: 22px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.userBalanceRub {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
64
src/pages/profile/ui/ProfilePage.tsx
Normal file
64
src/pages/profile/ui/ProfilePage.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import { Button, FormField } from '@shared/ui'
|
||||
import { WalletHeader } from '@widgets/wallet-header'
|
||||
import { ProfileAvatar, ProfileSection } from '@widgets/profile'
|
||||
import styles from './ProfilePage.module.css'
|
||||
|
||||
export function ProfilePage() {
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<WalletHeader />
|
||||
<main className={styles.main}>
|
||||
<div className={styles.profileTop}>
|
||||
<ProfileAvatar />
|
||||
<div className={styles.userInfo}>
|
||||
<span className={styles.userName}>Иванов Иван Иванович</span>
|
||||
<span className={styles.userBalance}>$245.00</span>
|
||||
<span className={styles.userBalanceRub}>≈ 22 340,50 ₽</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.sections}>
|
||||
<ProfileSection title="Личные данные">
|
||||
<div className={styles.grid2}>
|
||||
<FormField label="Полное ФИО" value="Иванов Иван Иванович" placeholder="Например: Иванов Иван Иванович" />
|
||||
<FormField label="Адрес электронной почты" value="ivanov@mail.ru" type="email" icon="check" placeholder="example@mail.ru" readOnly />
|
||||
<FormField label="Серия и номер паспорта" value="4515 123456" placeholder="4515 123456" readOnly />
|
||||
<FormField label="Номер телефона" value="+7 (999) 123-45-67" type="tel" icon="check" placeholder="+7 (999) 000-00-00" readOnly />
|
||||
</div>
|
||||
</ProfileSection>
|
||||
|
||||
<ProfileSection title="Верификация">
|
||||
<div className={styles.grid2}>
|
||||
<FormField label="ИНН" value="7712345678" readOnly icon="lock" placeholder="123456789012" />
|
||||
<FormField label="ID аккаунта" value="ECSA-00184729" readOnly icon="lock" placeholder="ECSA-00000000" />
|
||||
</div>
|
||||
</ProfileSection>
|
||||
|
||||
<ProfileSection
|
||||
title="Безопасность"
|
||||
actions={
|
||||
<>
|
||||
<Button variant="danger">⚠️ Посмотреть приватный ключ</Button>
|
||||
<Button variant="primary">СОХРАНИТЬ</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className={styles.grid1}>
|
||||
<FormField label="Адрес ERC-20" readOnly icon="lock" value="0x1a2B3c4D5e6F7a8B9c0D1e2F3a4B5c6D7e8F9a0b" placeholder="0x0000000000000000000000000000000000000000" />
|
||||
</div>
|
||||
</ProfileSection>
|
||||
|
||||
<ProfileSection title="Мнемоника">
|
||||
<div className={styles.mnemonicRow}>
|
||||
<div className={styles.mnemonicInfo}>
|
||||
<span className={styles.mnemonicIcon}>🔑</span>
|
||||
<span className={styles.mnemonicText}>Сид-фраза из 12 слов для восстановления кошелька</span>
|
||||
</div>
|
||||
<Button variant="danger">⚠ Показать мнемонику</Button>
|
||||
</div>
|
||||
</ProfileSection>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user