Skip to content

Commit ddcce0a

Browse files
Ronnie018Ronnie018
authored
Merge pull request #239 from Ronnie018/network-page-wireframe
Network page wireframe
2 parents 7068959 + 3d93b49 commit ddcce0a

File tree

4 files changed

+509
-7
lines changed

4 files changed

+509
-7
lines changed

‎src/components/Functionalities/pages/Network/api.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export const receivedRequests = [
2+
{
3+
name: "Leta Dean",
4+
image: {
5+
url: "https://randomuser.me/api/portraits/women/79.jpg",
6+
},
7+
bio: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. corrupti earum officiis. Ad cum error natus asperiores quidem?",
8+
},
9+
{
10+
name: "Erik Armstrong",
11+
image: {
12+
url: "https://randomuser.me/api/portraits/men/0.jpg",
13+
},
14+
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
15+
},
16+
];
17+
export const sentRequests = [
18+
{
19+
name: "Deanna Scott",
20+
image: {
21+
url: "https://randomuser.me/api/portraits/women/82.jpg",
22+
},
23+
bio: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Um officiis dolor vel molestias quidem dicta perferendis praesentium inventore",
24+
},
25+
{
26+
name: "Erik Armstrong",
27+
image: {
28+
url: "https://randomuser.me/api/portraits/men/0.jpg",
29+
},
30+
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
31+
},
32+
];

‎src/components/Functionalities/pages/Network/index.jsx

+169-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,173 @@
1-
// import { useEffect, useRef } from 'react';
21
import { Container } from "./styled";
2+
import Navbar from "../../../Navbar";
3+
import { receivedRequests as RR, sentRequests as SR } from "./api";
4+
import { useEffect, useState } from "react";
5+
import { IoClose, IoCheckmark, IoSearch } from "react-icons/io5";
36

4-
const Parallax = (props) => {
5-
return <Container></Container>;
7+
const Network = (props) => {
8+
const [sentRequests, useSentRequests] = useState(SR);
9+
const [receivedRequests, setReceivedRequests] = useState(RR);
10+
11+
const [scrollPos, setScrollPos] = useState({
12+
start: true,
13+
end: false,
14+
});
15+
16+
return (
17+
<Container>
18+
<Navbar />
19+
<div className="wrapper">
20+
<div className="left-box">
21+
<div className="left-content">
22+
<div className="header-container">
23+
<h1>Users Network</h1>
24+
</div>
25+
<div className="search-container">
26+
<div className="outline">
27+
<input type="text" placeholder="Search for users" />
28+
</div>
29+
<button
30+
className="search-btn"
31+
onClick={(e) => {
32+
console.log("should search user");
33+
}}
34+
>
35+
<IoSearch className="icon" size={20} color="#d9d9d9" />
36+
</button>
37+
</div>
38+
<div
39+
className="sections"
40+
onScroll={(e) => {
41+
const calc = e.target.scrollHeight - e.target.offsetHeight;
42+
if (e.target.scrollTop === calc) {
43+
setScrollPos(({ start, end }) => {
44+
return { start, end: true };
45+
});
46+
} else if (e.target.scrollTop === 0) {
47+
setScrollPos(({ start, end }) => {
48+
return { start: true, end };
49+
});
50+
} else {
51+
setScrollPos(() => {
52+
return { start: false, end: false };
53+
});
54+
}
55+
}}
56+
>
57+
{sentRequests && (
58+
<section className="section">
59+
<div className="sections-header-container">
60+
<h1>Requests</h1>
61+
</div>
62+
{sentRequests.map((request, i) => {
63+
return (
64+
<div
65+
className="request-container"
66+
key={`${request.name}-${i}`}
67+
>
68+
<div className="img-wrapper">
69+
<img
70+
src={
71+
request?.image?.url ||
72+
"https://via.placeholder.com/150"
73+
}
74+
alt=""
75+
/>
76+
</div>
77+
78+
<span className="name">
79+
{request.name}
80+
<div className="popup">
81+
<div className="img-wrapper">
82+
<img
83+
src={
84+
request.image?.url ||
85+
"https://via.placeholder.com/150"
86+
}
87+
alt=""
88+
/>
89+
</div>
90+
<div className="content-wrapper">
91+
<div className="name">{request.name}</div>
92+
<div className="bio">{request.bio}</div>
93+
</div>
94+
</div>
95+
</span>
96+
97+
<div className="options">
98+
<IoCheckmark className="icon icon-accept" />
99+
<IoClose className="icon icon-reject" />
100+
</div>
101+
</div>
102+
);
103+
})}
104+
</section>
105+
)}
106+
{receivedRequests && (
107+
<section className="section">
108+
<div className="sections-header-container">
109+
<h1>Pending</h1>
110+
</div>
111+
{receivedRequests.map((request, i) => {
112+
return (
113+
<div
114+
className="request-container"
115+
key={`${request.name}-${i}`}
116+
>
117+
<div className="img-wrapper">
118+
<img
119+
src={
120+
request.image?.url ||
121+
"https://via.placeholder.com/150"
122+
}
123+
alt=""
124+
/>
125+
</div>
126+
127+
<div className="middle">
128+
<div className="popup">
129+
<div className="img-wrapper">
130+
<img
131+
src={
132+
request.image?.url ||
133+
"https://via.placeholder.com/150"
134+
}
135+
alt=""
136+
/>
137+
</div>
138+
<div className="content-wrapper">
139+
<div className="name">{request.name}</div>
140+
<div className="bio">{request.bio}</div>
141+
</div>
142+
</div>
143+
<span className="name">{request.name}</span>
144+
<span className="status">pending</span>
145+
</div>
146+
147+
<div className="options received">
148+
<IoClose className="icon icon-reject" />
149+
</div>
150+
</div>
151+
);
152+
})}
153+
</section>
154+
)}
155+
</div>
156+
</div>
157+
</div>
158+
<main className="main-panel">
159+
<div className="main-content">
160+
<div className="header-container">
161+
<h1>
162+
Results For <span>Lorem Ipsum Dolor:</span>
163+
</h1>
164+
</div>
165+
<div className="content"></div>
166+
</div>
167+
</main>
168+
</div>
169+
</Container>
170+
);
6171
};
7172

8-
export default Parallax;
173+
export default Network;

0 commit comments

Comments
 (0)