Skip to content

Commit 00ac6bd

Browse files
lexxus0lexxus0
committed
add roles to profile page
1 parent a58b5d4 commit 00ac6bd

File tree

10 files changed

+242
-18
lines changed

10 files changed

+242
-18
lines changed

‎src/assets/icons/iconClose.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/components/filters/filters/Filters.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ export default function Filters({ location }) {
2222
onClick={handleFilterClick}
2323
>
2424
<Icon name="filter-remove" className={css.filterIcon} />
25-
{/* <TbFilterX className={css.filterIcon} /> */}
2625
</button>
2726
<button className={css.filterItem}>
2827
<Icon name="collapse-categories" className={css.listIcon} />

‎src/components/posts/postItem/PostItem.jsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import Button from "../../UI/buttons/Button.jsx";
88
import { useMediaQuery } from "react-responsive";
99

1010
export default function PostItem({ post, location }) {
11-
const isAdmin = false;
12-
const isMyProfile = false;
11+
const isAdmin = true;
12+
const isMyProfile = true;
1313
const isDesktop = useMediaQuery({ minWidth: 1440 });
1414
const isTablet = useMediaQuery({ minWidth: 768 });
1515

@@ -59,9 +59,20 @@ export default function PostItem({ post, location }) {
5959
</div>
6060
</div>
6161

62-
<Button size={isDesktop ? "xxl" : isTablet ? "xl" : "lg"}>
63-
Детальніше
64-
</Button>
62+
{!isAdmin && !isMyProfile ? (
63+
<Button size={isDesktop ? "xxl" : isTablet ? "xl" : "lg"}>
64+
Детальніше
65+
</Button>
66+
) : isAdmin ? (
67+
<div className={css.buttonsWrapper}>
68+
<Button size={isDesktop ? "sm" : "xs"}>
69+
{isMyProfile ? "Редагувати" : "Детальніше"}
70+
</Button>
71+
<Button size={isDesktop ? "sm" : "xs"} variant="secondary-red">
72+
Видалити
73+
</Button>
74+
</div>
75+
) : null}
6576
</li>
6677
);
6778
}

‎src/components/posts/postItem/PostItem.module.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,11 @@
9191
font-weight: 500;
9292
}
9393

94+
.buttonsWrapper {
95+
display: flex;
96+
gap: 16px;
97+
}
98+
9499
@media screen and (min-width: 768px) {
95100
.postPic {
96101
width: 336px;
@@ -100,6 +105,9 @@
100105
right: 18px;
101106
top: 18px;
102107
}
108+
.buttonsWrapper {
109+
gap: 22px;
110+
}
103111
}
104112

105113
@media screen and (min-width: 1440px) {
@@ -111,4 +119,7 @@
111119
right: 24px;
112120
top: 24px;
113121
}
122+
.buttonsWrapper {
123+
gap: 20px;
124+
}
114125
}

‎src/components/userProfile/userCard/UserCard.jsx‎

Lines changed: 114 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,44 @@
11
import user from "./user.json";
22
import css from "./UserCard.module.css";
33
import { MdOutlineStars } from "react-icons/md";
4+
import { BsThreeDots } from "react-icons/bs";
5+
import { useMediaQuery } from "react-responsive";
6+
import { useEffect, useRef, useState } from "react";
7+
import { LuPencil } from "react-icons/lu";
8+
import { RiLockPasswordLine } from "react-icons/ri";
9+
import iconClose from "../../../assets/icons/iconClose.svg";
10+
import { TbUserStar } from "react-icons/tb";
11+
import { FiTrash2 } from "react-icons/fi";
12+
import { IoBan } from "react-icons/io5";
13+
14+
export default function UserCard({ isMyPage, isAdmin }) {
15+
const isDesktop = useMediaQuery({ minWidth: "1440px" });
16+
const isMobile = useMediaQuery({ maxWidth: "768px" });
17+
18+
const [isOpen, setIsOpen] = useState(false);
19+
20+
const modalRef = useRef(null);
21+
const buttonRef = useRef(null);
22+
23+
useEffect(() => {
24+
const handleClickOutside = (event) => {
25+
if (
26+
modalRef.current &&
27+
!modalRef.current.contains(event.target) &&
28+
buttonRef.current &&
29+
!buttonRef.current.contains(event.target)
30+
) {
31+
setIsOpen(false);
32+
}
33+
};
34+
35+
document.addEventListener("mousedown", handleClickOutside);
36+
37+
return () => {
38+
document.removeEventListener("mousedown", handleClickOutside);
39+
};
40+
}, [buttonRef]);
441

5-
export default function UserCard() {
642
return (
743
<div className={css.cardWrapper}>
844
<div>
@@ -18,10 +54,60 @@ export default function UserCard() {
1854
height={74}
1955
/>
2056
<div className={css.textWrapper}>
57+
{(isAdmin || isMyPage) && !isDesktop && (
58+
<BsThreeDots
59+
className={css.dotsIcon}
60+
ref={buttonRef}
61+
onClick={() => setIsOpen(!isOpen)}
62+
/>
63+
)}
64+
{isOpen && (
65+
<div className={css.settings} ref={modalRef}>
66+
{isMobile && (
67+
<div className={css.closeIconWrapper}>
68+
<img
69+
src={iconClose}
70+
alt="Close"
71+
className={css.closeIcon}
72+
onClick={() => setIsOpen(false)}
73+
/>
74+
</div>
75+
)}
76+
{!isAdmin ? (
77+
<div className={css.icons}>
78+
<p className={css.settingsParagraph}>
79+
<LuPencil className={css.settingsIcon} />
80+
Редагувати свій профіль
81+
</p>
82+
<p className={css.settingsParagraph}>
83+
<RiLockPasswordLine className={css.settingsIcon} />
84+
Змінити пароль
85+
</p>
86+
</div>
87+
) : (
88+
<div className={css.icons}>
89+
<p className={css.settingsParagraph}>
90+
<TbUserStar className={css.settingsIcon} />
91+
Змінити Роль
92+
</p>
93+
<p className={css.settingsParagraph}>
94+
<FiTrash2 className={css.settingsIcon} />
95+
Видалити Профіль
96+
</p>
97+
<p className={css.settingsParagraph}>
98+
<IoBan className={css.settingsIcon} />
99+
Забанити Користувача
100+
</p>
101+
</div>
102+
)}
103+
</div>
104+
)}
105+
21106
<div className={css.column}>
22107
<p className={css.registerDate}>
23108
Дата реєстрації <span>{user.createdAt}</span>
24109
</p>
110+
25111
<div className={css.nameWrapper}>
26112
<div className={css.column}>
27113
<p className={css.name}>{user.name}</p>
@@ -33,6 +119,33 @@ export default function UserCard() {
33119
</p>
34120
<p className={css.deskRegisterDate}>
35121
Дата реєстрації <span>{user.createdAt}</span>
122+
{!isAdmin ? (
123+
<div className={css.deskIcons}>
124+
<p className={css.settingsParagraph}>
125+
<LuPencil className={css.settingsIcon} />
126+
Редагувати свій профіль
127+
</p>
128+
<p className={css.settingsParagraph}>
129+
<RiLockPasswordLine className={css.settingsIcon} />
130+
Змінити пароль
131+
</p>
132+
</div>
133+
) : isDesktop ? (
134+
<div className={css.deskIcons}>
135+
<p className={css.settingsParagraph}>
136+
<TbUserStar className={css.settingsIcon} />
137+
Змінити Роль
138+
</p>
139+
<p className={css.settingsParagraph}>
140+
<FiTrash2 className={css.settingsIcon} />
141+
Видалити Профіль
142+
</p>
143+
<p className={css.settingsParagraph}>
144+
<IoBan className={css.settingsIcon} />
145+
Забанити Користувача
146+
</p>
147+
</div>
148+
) : null}
36149
</p>
37150
</div>
38151
</div>

‎src/components/userProfile/userCard/UserCard.module.css‎

Lines changed: 88 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.cardWrapper {
22
margin-bottom: 28px;
3+
position: relative;
34
}
45

56
.cardWrapper img {
@@ -18,6 +19,16 @@
1819
flex-direction: column;
1920
}
2021

22+
.dotsIcon {
23+
position: absolute;
24+
width: 32px;
25+
right: 0;
26+
top: -7.5px;
27+
height: 32px;
28+
color: #24448a;
29+
cursor: pointer;
30+
}
31+
2132
.cardWrapper span {
2233
margin-left: 8px;
2334
}
@@ -28,6 +39,8 @@
2839
line-height: 134%;
2940
letter-spacing: 0em;
3041
color: #24448a;
42+
display: flex;
43+
align-items: center;
3144
}
3245

3346
.name,
@@ -77,6 +90,53 @@
7790
gap: 8px;
7891
}
7992

93+
.dots {
94+
display: flex;
95+
justify-content: space-between;
96+
align-items: center;
97+
}
98+
99+
/* SETTINGS */
100+
.settings {
101+
position: absolute;
102+
border-radius: 10px;
103+
top: 30px;
104+
right: 0;
105+
padding: 20px 16px;
106+
width: auto;
107+
height: auto;
108+
background: #f2f6ff;
109+
}
110+
111+
.settingsParagraph {
112+
display: flex;
113+
align-items: center;
114+
gap: 8px;
115+
font-weight: 400;
116+
font-size: 16px;
117+
line-height: 140%;
118+
letter-spacing: 0em;
119+
color: #24448a;
120+
cursor: pointer;
121+
}
122+
123+
.icons {
124+
display: flex;
125+
flex-direction: column;
126+
gap: 24px;
127+
}
128+
129+
.closeIcon {
130+
border-radius: 0 !important;
131+
margin-bottom: 16px;
132+
cursor: pointer;
133+
}
134+
135+
.settingsIcon {
136+
width: 24px;
137+
height: 24px;
138+
}
139+
80140
@media screen and (min-width: 768px) {
81141
.cardWrapper img {
82142
width: 86px;
@@ -86,6 +146,10 @@
86146
margin-bottom: 17px;
87147
}
88148

149+
.dotsIcon {
150+
top: 68.5px;
151+
}
152+
89153
.cardWrapper {
90154
margin-bottom: 50px;
91155
}
@@ -127,6 +191,12 @@
127191
.userName {
128192
font-weight: 400;
129193
}
194+
195+
/* SETTINGS */
196+
.settings {
197+
top: 80px;
198+
right: 40px;
199+
}
130200
}
131201

132202
@media screen and (min-width: 1440px) {
@@ -150,10 +220,24 @@
150220
}
151221
.deskRegisterDate {
152222
display: block;
153-
font-weight: 400;
154223
margin-left: auto;
155-
font-size: 14px;
156-
line-height: 120%;
157-
color: #697a9e;
224+
font-family: "Poppins", sans-serif;
225+
font-weight: 400;
226+
font-size: 16px;
227+
line-height: 140%;
228+
letter-spacing: 0em;
229+
color: #24448a;
230+
}
231+
.deskIcons {
232+
display: flex;
233+
gap: 16px;
234+
flex-direction: column;
235+
}
236+
.deskIcons {
237+
display: flex;
238+
flex-direction: column;
239+
position: absolute;
240+
right: 30px;
241+
top: 60px;
158242
}
159243
}

‎src/index.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@ img {
6868
}
6969

7070
body {
71-
background-color: var(--background);
7271
font-family: var(--font-family);
7372
}
7473
#root {

‎src/pages/SignUpPage/SignUpPage.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import Container from "../../components/Container/Container";
1+
import Container from "../../components/container/Container.jsx";
22
import SignUpForm from "../../components/SignUpForm/SignUpForm";
33
import css from "../SignUpPage/SingUpPage.module.css";
44

55
const SignUpPage = () => {
66
return (
7-
<Container >
7+
<Container>
88
<a href="/" className={css.Logo}>
99
<img src="/favicon.svg" alt="Logo" />
1010
<span className={css.logoText}>PhotoShare</span>

‎src/pages/profile/ProfilePage.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,16 @@ import UserGallery from "../../components/userProfile/userGallery/UserGallery.js
66
import css from "./ProfilePage.module.css";
77

88
export default function ProfilePage() {
9+
const isMyPage = true;
910
const isAdmin = false;
11+
1012
return (
1113
<div className={`container ${css.wrapper}`}>
1214
<BackButton />
1315
<div className={css.title}>
1416
<Title location="userProfile" className={css.title} />
1517
</div>
16-
<UserCard />
18+
<UserCard isMyPage={isMyPage} isAdmin={isAdmin} />
1719
<UserGallery />
1820
</div>
1921
);

0 commit comments

Comments
 (0)