add description change

1 files changed, 41 insertions, 17 deletions

diff --git a/src/components/settings/AboutMe.tsx b/src/components/settings/AboutMe.tsx
index 769885a..bcb6f58 100644
--- a/src/components/settings/AboutMe.tsx
+++ b/src/components/settings/AboutMe.tsx
@@ -1,38 +1,62 @@
 import { useState } from 'react';
-import { ChangeEvent } from 'react';
-import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { changeDescription } from '@/lib/api/ChangeDescription';
+
 export default function AboutMe() {
     const maxLength = 250;
-    const [text, setText] = useState('');
 
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-        const value = e.target.value;
+    const [about, setAbout] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleSave = async () => {
+        if (loading) return;
+
+        setLoading(true);
+        setError(null);
 
-        if (value.length <= maxLength) {
-            setText(value);
+        const res = await changeDescription(about);
+
+        if (res.error) {
+            setError(res.error.general);
         }
+
+        setLoading(false);
     };
 
     return (
         <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>
+            <p className="font-medium text-light-violet ml-[20px]">ОБО МНЕ</p>
 
-            <div className="flex flex-row flex-end p-[20px] w-[600px] h-[120px] border-solid border-[1px] rounded-[20px]">
-                <Input
-                    value={text}
-                    onChange={handleChange}
+            <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="font-regular flex flex-row justify-center items-end ml-[10px] text-light-violet">
-                    {maxLength - text.length}
+                <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>
+            {error && <p className="text-red text-sm ml-[20px]">{error}</p>}
+
+            <Button
+                className="w-[105px]"
+                onClick={handleSave}
+                disabled={loading}
+            >
+                {loading ? 'Сохранение...' : 'Сменить'}
+            </Button>
         </div>
     );
 }