17.05.2026 funny
This commit is contained in:
@@ -221,7 +221,7 @@
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 0 0 50%;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.field {
|
||||
|
||||
@@ -61,15 +61,6 @@ export function ConverterSection() {
|
||||
>
|
||||
КУПИТЬ
|
||||
</button>
|
||||
{/* <button
|
||||
type="button"
|
||||
disabled
|
||||
className={styles.tab}
|
||||
data-active={c.mode === 'sell' || undefined}
|
||||
onClick={() => c.setMode('sell')}
|
||||
>
|
||||
ПРОДАТЬ
|
||||
</button> */}
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
|
||||
@@ -197,6 +197,27 @@
|
||||
border-top: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.payBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 32px;
|
||||
padding: 18px;
|
||||
border-radius: 12px;
|
||||
background: var(--grad-center);
|
||||
color: var(--text-primary);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.payBtn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.body {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -217,7 +238,7 @@
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 0 0 50%;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.field {
|
||||
|
||||
@@ -3,10 +3,11 @@ import { useConverter } from '../model/useConverter'
|
||||
import { progressPercent } from '../model/tiers'
|
||||
import { usePaymentConfig, usePaymentQuote } from '@features/payment'
|
||||
import { useDebounce } from '@shared/lib/hooks/useDebounce'
|
||||
import { AgreementCheckbox } from './AgreementCheckbox'
|
||||
import { CommissionTable } from './CommissionTable'
|
||||
import styles from './Converter.module.css'
|
||||
import { Title } from '@shared/ui/Title/Title'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { ROUTES } from '@shared/config/routes'
|
||||
|
||||
export function Converter() {
|
||||
const { data: config } = usePaymentConfig()
|
||||
@@ -54,15 +55,6 @@ export function Converter() {
|
||||
>
|
||||
КУПИТЬ
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.tab}
|
||||
data-active={c.mode === 'sell' || undefined}
|
||||
onClick={() => c.setMode('sell')}
|
||||
disabled
|
||||
>
|
||||
ПРОДАТЬ
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
@@ -116,9 +108,9 @@ export function Converter() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.bottom}>
|
||||
<AgreementCheckbox checked={c.agreed} onToggle={() => c.setAgreed(!c.agreed)} />
|
||||
</div>
|
||||
<Link to={ROUTES.CONVERTER} className={styles.payBtn}>
|
||||
Перейти к оплате
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
@@ -27,6 +27,19 @@
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
.avatarImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--danger, #ff5252);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
@@ -1,14 +1,59 @@
|
||||
import { useRef, useState } from 'react'
|
||||
import { Button } from '@shared/ui'
|
||||
import { useMe, useUploadAvatar } from '@features/auth'
|
||||
import styles from './ProfileAvatar.module.css'
|
||||
|
||||
function fileToBase64(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
const result = reader.result as string
|
||||
const comma = result.indexOf(',')
|
||||
resolve(comma >= 0 ? result.slice(comma + 1) : result)
|
||||
}
|
||||
reader.onerror = () => reject(reader.error)
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
}
|
||||
|
||||
export function ProfileAvatar() {
|
||||
const { data } = useMe()
|
||||
const { mutateAsync: upload, isPending } = useUploadAvatar()
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const avatarLink = data?.avatar_link ?? null
|
||||
|
||||
const openPicker = () => {
|
||||
if (isPending) return
|
||||
inputRef.current?.click()
|
||||
}
|
||||
|
||||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]
|
||||
e.target.value = ''
|
||||
if (!file) return
|
||||
|
||||
setError(null)
|
||||
try {
|
||||
const photo_base64 = await fileToBase64(file)
|
||||
await upload({ photo_base64, decoded_bytes: String(file.size) })
|
||||
} catch {
|
||||
setError('Не удалось загрузить фото')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.col}>
|
||||
<div className={styles.avatar}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="8" r="4" />
|
||||
<path d="M4 20c0-4 4-7 8-7s8 3 8 7" />
|
||||
</svg>
|
||||
<div className={styles.avatar} onClick={openPicker}>
|
||||
{avatarLink ? (
|
||||
<img src={avatarLink} alt="avatar" className={styles.avatarImg} />
|
||||
) : (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="8" r="4" />
|
||||
<path d="M4 20c0-4 4-7 8-7s8 3 8 7" />
|
||||
</svg>
|
||||
)}
|
||||
<div className={styles.overlay}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z" />
|
||||
@@ -16,10 +61,19 @@ export function ProfileAvatar() {
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleFileChange}
|
||||
hidden
|
||||
/>
|
||||
<div className={styles.addPhoto}>
|
||||
<Button variant="ghost">ДОБАВИТЬ ФОТО</Button>
|
||||
<Button variant="ghost" onClick={openPicker} disabled={isPending}>
|
||||
{isPending ? 'ЗАГРУЗКА...' : 'ДОБАВИТЬ ФОТО'}
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="danger">УДАЛИТЬ ФОТО</Button>
|
||||
{error && <span className={styles.error}>{error}</span>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user