add description change

1 files changed, 5 insertions, 28 deletions

diff --git a/src/components/settings/ProfilePage.tsx b/src/components/settings/ProfilePage.tsx
index 75370d2..1bb2f8d 100644
--- a/src/components/settings/ProfilePage.tsx
+++ b/src/components/settings/ProfilePage.tsx
@@ -3,6 +3,7 @@ import { Button } from '@/components/ui';
 import { Separator } from '@/components/ui';
 import { changeUsername } from './changeusername';
 import { useState } from 'react';
+import AboutMe from './AboutMe';
 export default function ProfilePage() {
     const maxLength = 250;
     const [about, setAbout] = useState('');
@@ -11,7 +12,9 @@ export default function ProfilePage() {
     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>
+                <p className="font-medium text-light-violet gap-[10px] ml-[20px]">
+                    НИКНЕЙМ
+                </p>
 
                 <InputField
                     placeholder="Введите никнейм"
@@ -28,33 +31,7 @@ export default function ProfilePage() {
                 </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>{' '}
+            <AboutMe />
             <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]">