started to work with profile

EspadaKomanda · Nov 7, 2024 · 104fbbd · 104fbbd
1 parent 5caaee8
commit 104fbbd
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 4 deletions.
diff --git a/vtb_openapi_frontend/public/images/bg_profile.png b/vtb_openapi_frontend/public/images/bg_profile.png
diff --git a/vtb_openapi_frontend/public/profile.json b/vtb_openapi_frontend/public/profile.json
diff --git a/vtb_openapi_frontend/src/app/profile/page.js b/vtb_openapi_frontend/src/app/profile/page.js
@@ -0,0 +1,94 @@
+"use client";
+import Image from "next/image";
+import { useState, useRef } from "react";
+import NavigationComponent from "@/components/navigation_component";
+
+export default function Profile() {
+    const [avatar, setAvatar] = useState('/images/default_avatar.png');
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const fileInputRef = useRef(null);
+
+    const handleAvatarChange = (file) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            setAvatar(reader.result);
+            setIsModalOpen(false);
+        };
+        reader.readAsDataURL(file);
+    };
+
+    const handleFileInputClick = () => {
+        fileInputRef.current.click();
+    };
+
+    const handleDrop = (event) => {
+        event.preventDefault();
+        setIsDragging(false);
+        const file = event.dataTransfer.files[0];
+        if (file) {
+            handleAvatarChange(file);
+        }
+    };
+
+    const handleDragOver = (event) => {
+        event.preventDefault();
+        setIsDragging(true);
+    };
+
+    const handleDragLeave = () => {
+        setIsDragging(false);
+    };
+
+    return (
+        <>
+            <header className="pb-40 bg-cover bg-center" style={{ backgroundImage: "url('/images/bg_profile.png')" }}>
+                <NavigationComponent />
+            </header>
+            <main className="container p-5 relative">
+                <div className="flex items-center justify-center">
+                    <div className="absolute -top-30 left-1/2 transform -translate-x-1/2">
+                        <Image 
+                            src={avatar} 
+                            alt="" 
+                            width={240} 
+                            height={240} 
+                            className="w-60 h-60 rounded-full bg-custom-gradient cursor-pointer border-4" 
+                            onClick={() => setIsModalOpen(true)}
+                        />
+                    </div>
+                </div>
+            </main>
+
+            {isModalOpen && (
+                <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+                    <div className="bg-white p-5 rounded shadow-lg">
+                        <h2 className="text-lg font-bold mb-4">Редактирование фотографии</h2>
+                        <div 
+                            className={`border-2 p-4 text-center mb-4 cursor-pointer ${isDragging ? 'rounded-lg bg-blue-100' : 'rounded-lg border-dashed border-gray-300'}`}
+                            onClick={handleFileInputClick}
+                            onDrop={handleDrop}
+                            onDragOver={handleDragOver}
+                            onDragLeave={handleDragLeave}
+                        >
+                            Перетащите изображение сюда или нажмите, чтобы загрузить
+                        </div>
+                        <input 
+                            type="file" 
+                            accept="image/*" 
+                            onChange={(e) => handleAvatarChange(e.target.files[0])} 
+                            ref={fileInputRef}
+                            className="hidden"
+                        />
+                        <button 
+                            className="mt-4 bg-custom-bg-blue text-white px-4 py-2 rounded" 
+                            onClick={() => setIsModalOpen(false)}
+                        >
+                            Закрыть
+                        </button>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}
diff --git a/vtb_openapi_frontend/src/app/search/page.js b/vtb_openapi_frontend/src/app/search/page.js
@@ -3,7 +3,7 @@ import SearchTourComponent from "@/components/serch_experience_component";
 export default function Search() {
     return (
         <div>
-            <header className=" text-white">
+            <header>
                 <NavigationComponent/>
             </header>
             <main className="container p-5">

diff --git a/vtb_openapi_frontend/src/components/serch_experience_component.js b/vtb_openapi_frontend/src/components/serch_experience_component.js
@@ -137,8 +137,6 @@ export default function SearchTourComponent() {
                 >
                     <Image src={img.filter} alt="filter" width={25} height={25} className='ml-auto' />
                 </button>
-
-
                 <AnimatePresence>
                 {isFilterVisible && (
                     <motion.div
@@ -339,7 +337,6 @@ export default function SearchTourComponent() {
                     </motion.div>
                 )}
                 </AnimatePresence>
-
                 <button 
                     type="submit" 
                     className="bg-custom-gradient text-white py-1 px-2 sm:px-5 rounded right-1 top-5 absolute transition duration-300 hover:scale-105 active:scale-95"