diff options
| author | l3wdfut4pwr <l3wdfut4pwr@gmail.com> | 2026-04-21 13:33:46 +0300 |
|---|---|---|
| committer | l3wdfut4pwr <l3wdfut4pwr@gmail.com> | 2026-04-21 13:33:46 +0300 |
| commit | c7d2526afec5ffb8918c20d7c1c58852f1c647bd (patch) | |
| tree | 476fa2241c0febfcb353f61c4bfecf462b6a359f /src/components/settings/ProfilePage.tsx | |
| parent | 8b2f7f4cbf7a59cc6c600299df1b1f67fccae93b (diff) | |
minor profile changes
Diffstat (limited to 'src/components/settings/ProfilePage.tsx')
| -rw-r--r-- | src/components/settings/ProfilePage.tsx | 30 |
1 files changed, 23 insertions, 7 deletions
diff --git a/src/components/settings/ProfilePage.tsx b/src/components/settings/ProfilePage.tsx index 9d5b81b..cac8e7e 100644 --- a/src/components/settings/ProfilePage.tsx +++ b/src/components/settings/ProfilePage.tsx @@ -1,9 +1,10 @@ import { InputField } from '@/components/ui/inputfield'; -import { Input } from '@/components/ui/input'; 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]"> @@ -16,14 +17,29 @@ export default function ProfilePage() { <p className="font-medium text-light-violet gap-[10px] ml-[20px]"> ОБО МНЕ </p> - <div className="flex flex-row flex-end p-[20px] w-[600px] h-[120px] border-solid border-[1px] rounded-[20px]"> - <Input placeholder="Введите описание о себе" /> - <p className="font-regular flex flex-row justify-center items-end ml-[10px] text-light-violet"> - 250 + + <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> + </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]"> |