feat: add edit profile modal template

This commit is contained in:
Kentai Radiquum 2024-09-18 16:01:01 +05:00
parent 3211c260a0
commit 384bd09a27
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 85 additions and 1 deletions

View file

@ -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 ||

View file

@ -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>
);
};

View file

@ -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} />
</>
);
};