blob: cac8e7e989dff4385c937062d9b330ca1b4bf2d5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
import { InputField } from '@/components/ui/inputfield';
import { Button } from '@/components/ui';
import { Separator } from '@/components/ui';
import { useState } from 'react';
export default function ProfilePage() {
const maxLength = 250;
const [about, setAbout] = useState('');
return (
<div className="flex flex-col flex-start gap-[20px] w-[900px] h-[804px]">
<div className="flex flex-col flex-start gap-[10px] w-[310px] h-[123px]">
<p className="font-medium gap-[10px] ml-[20px]">НИКНЕЙМ</p>
<InputField placeholder="Введите никнейм" />
<Button className="w-[105px]">Сменить</Button>
</div>
<Separator className="bg-violet/50 h-[1px]" />
<div className="flex flex-col flex-start gap-[10px] w-[600px] h-[284px]">
<p className="font-medium text-light-violet gap-[10px] ml-[20px]">
ОБО МНЕ
</p>
<div className="flex flex-row p-[20px] w-[600px] h-[120px] border-solid border-[1px] rounded-[20px]">
<textarea
value={about}
onChange={(e) => setAbout(e.target.value)}
maxLength={maxLength}
placeholder="Введите описание о себе"
className="w-full h-full resize-none outline-none bg-transparent"
/>
<p
className={`ml-[10px] flex items-end ${
maxLength - about.length <= 10
? 'text-red'
: 'text-light-violet'
}`}
>
{maxLength - about.length}
</p>
</div>
<Button className="w-[105px]">Сменить</Button>
</div>{' '}
<Separator className="bg-violet/50 h-[1px]" />
<div className="flex flex-col flex-start gap-[10px] w-[219px] h-[74px]">
<p className="font-medium text-light-violet ml-[20px]">
АВАТАР
</p>
<div className="flex flex-row gap-[10px]">
<Button className="w-[105px]">Сменить</Button>
<Button variant={'danger'}>Удалить</Button>
</div>
</div>
<Separator className="bg-violet/50 h-[1px]" />
<div className="flex flex-col flex-start gap-[10px] w-[219px] h-[169px]">
<p className="font-medium text-light-violet ml-[20px]">
ТЕМА БАННЕРА
</p>
<div className="flex flex-row flex-wrap items-center content-start gap-[5px] w-[265px] h-[85px]">
{Array.from({ length: 12 }).map((_, index) => (
<div
key={index}
className={`w-[40px] h-[40px] rounded-full cursor-pointer gradient-${index}`}
/>
))}
</div>
<div className="flex flex-row gap-[10px]">
<Button className="w-[105px]">Сменить</Button>
<Button variant={'danger'}>Удалить</Button>
</div>
</div>
<Separator className="bg-violet/50 h-[1px]" />
<div className="flex flex-col flex-start gap-[10px] w-[219px] h-[74px]">
<p className="font-medium text-light-violet ml-[20px]">
БАННЕР
</p>
<div className="flex flex-row gap-[10px]">
<Button className="w-[105px]">Сменить</Button>
<Button variant={'danger'}>Удалить</Button>
</div>
</div>
</div>
);
}
|
