feat: add edit profile modal template

app/components/Profile/Profile.Actions.tsx

@@ -21,6 +21,8 @@ export const ProfileActions = (props: {
   token: string;
   is_me_blocked: boolean;
   is_blocked: boolean;
+  edit_isOpen: boolean;
+  edit_setIsOpen: any;
 }) => {
   const router = useRouter();
   const profileIdIsSmaller = props.my_profile_id < props.profile_id;
@@ -107,7 +109,7 @@ export const ProfileActions = (props: {
         <p>Отправил(-а) вам заявку в друзья</p>
       )}
       <div className="flex gap-2">
-        {props.isMyProfile && <Button color={"blue"}>Редактировать</Button>}
+        {props.isMyProfile && <Button color={"blue"} onClick={() => props.edit_setIsOpen(!props.edit_isOpen)}>Редактировать</Button>}
         {!props.isMyProfile && (
           <>
             {(!props.isFriendRequestsDisallowed ||

app/components/Profile/Profile.EditModal.tsx

@@ -0,0 +1,76 @@
+import { Modal } from "flowbite-react";
+
+export const ProfileEditModal = (props: {isOpen: boolean, setIsOpen: (isOpen: boolean) => void}) => {
+  return (
+    <Modal
+      dismissible
+      show={props.isOpen}
+      onClose={() => props.setIsOpen(false)}
+      size={"7xl"}
+    >
+        <Modal.Header>Редактирование профиля</Modal.Header>
+        <Modal.Body>
+            <div className="flex flex-col gap-4">
+                <div className="flex flex-col gap-4 pb-4 border-b-2 border-gray-300 border-solid">
+                    <div className="flex items-center gap-2">
+                        <span className="w-8 h-8 iconify mdi--user"></span>
+                        <p className="text-xl font-semibold">Профиль</p>
+                    </div>
+                    <div>
+                        <p className="text-lg">Изменить аватар</p>
+                    </div>
+                    <div>
+                        <p className="text-lg">Изменить статус</p>
+                        <p className="text-lg text-gray-500">статус</p>
+                    </div>
+                    <div>
+                        <p className="text-lg">Изменить никнейм</p>
+                        <p className="text-lg text-gray-500">никнейм</p>
+                    </div>
+                </div>
+                <div className="flex flex-col gap-4 pb-4 border-b-2 border-gray-300 border-solid">
+                    <div className="flex items-center gap-2">
+                        <span className="w-8 h-8 iconify mdi--anonymous "></span>
+                        <p className="text-xl font-semibold">Приватность</p>
+                    </div>
+                    <div>
+                        <p className="text-lg">Кто видит мою статистику, оценки и историю просмотра</p>
+                        <p className="text-lg text-gray-500">Все пользователи</p>
+                    </div>
+                    <div>
+                        <p className="text-lg">Кто видит в профиле мои комментарии, коллекции, видео и друзей</p>
+                        <p className="text-lg text-gray-500">Все пользователи</p>
+                    </div>
+                    <div>
+                        <p className="text-lg">Кто видит в профиле мои социальные сети</p>
+                        <p className="text-lg text-gray-500">Все пользователи</p>
+                    </div>
+                    <div>
+                        <p className="text-lg">Кто может отправлять мне заявки в друзья</p>
+                        <p className="text-lg text-gray-500">Все пользователи</p>
+                    </div>
+                    <div>
+                        <p className="text-lg">Блоклист</p>
+                        <p className="text-lg text-gray-500">Список пользователей, которым запрещён доступ к вашей странице</p>
+                    </div>
+                </div>
+                <div className="flex flex-col gap-4">
+                    <div className="flex items-center gap-2">
+                        <span className="w-8 h-8 iconify mdi--shield"></span>
+                        <p className="text-xl font-semibold">Безопасность и привязка к сервисам</p>
+                    </div>
+                    <div>
+                        <p className="text-lg">Изменить Email или Пароль</p>
+                        <p className="text-lg text-gray-500">Изменить возможно только в мобильном приложении</p>
+                    </div>
+                    <div>
+                        <p className="text-lg">Привязка к сервисам</p>
+                        <p className="text-lg text-gray-500">Изменить возможно только в мобильном приложении</p>
+                        <p className="text-lg text-gray-500">Аккаунт привязан к: сер1, сер2</p>
+                    </div>
+                </div>
+            </div>
+        </Modal.Body>
+    </Modal>
+  );
+};

app/pages/Profile.tsx

@@ -14,6 +14,7 @@ import { ProfileWatchDynamic } from "#/components/Profile/Profile.WatchDynamic";
 import { ProfileActions } from "#/components/Profile/Profile.Actions";
 import { ProfileReleaseRatings } from "#/components/Profile/Profile.ReleaseRatings";
 import { ProfileReleaseHistory } from "#/components/Profile/Profile.ReleaseHistory";
+import { ProfileEditModal } from "#/components/Profile/Profile.EditModal";
 
 const fetcher = async (url: string) => {
   const res = await fetch(url);
@@ -34,6 +35,8 @@ export const ProfilePage = (props: any) => {
   const [user, setUser] = useState(null);
   const [isMyProfile, setIsMyProfile] = useState(false);
 
+  const [isOpen, setIsOpen] = useState(false);
+
   let url = `${ENDPOINTS.user.profile}/${props.id}`;
   if (authUser.token) {
     url += `?token=${authUser.token}`;
@@ -173,6 +176,8 @@ export const ProfilePage = (props: any) => {
               token={authUser.token}
               is_me_blocked={user.is_me_blocked}
               is_blocked={user.is_blocked}
+              edit_isOpen={isOpen}
+              edit_setIsOpen={setIsOpen}
             />
           )}
           {!user.is_stats_hidden && (
@@ -202,6 +207,7 @@ export const ProfilePage = (props: any) => {
           )}
         </div>
       </div>
+      <ProfileEditModal isOpen={isOpen && isMyProfile} setIsOpen={setIsOpen} />
     </>
   );
 };