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]">