Skip to content

Commit 96f876f

Browse files
Ronnie018Ronnie018
authored
Merge pull request #240 from Ronnie018/network-page-wireframe
Network page wireframe
2 parents ddcce0a + 4e64e6c commit 96f876f

File tree

7 files changed

+970
-73
lines changed

7 files changed

+970
-73
lines changed

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

+60
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,63 @@ export const sentRequests = [
3030
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
3131
},
3232
];
33+
export const searchResults = [
34+
{
35+
name: "Deanna Scott",
36+
image: {
37+
url: "https://randomuser.me/api/portraits/women/82.jpg",
38+
},
39+
bio: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Um officiis dolor vel molestias quidem dicta perferendis praesentium inventore",
40+
},
41+
{
42+
name: "Erik Armstrong",
43+
image: {
44+
url: "https://randomuser.me/api/portraits/men/0.jpg",
45+
},
46+
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
47+
},
48+
];
49+
export const youMayKnow = [
50+
{
51+
name: "Deanna Scott",
52+
image: {
53+
url: "https://randomuser.me/api/portraits/women/82.jpg",
54+
},
55+
bio: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Um officiis dolor vel molestias quidem dicta perferendis praesentium inventore",
56+
},
57+
{
58+
name: "Erik Armstrong",
59+
image: {
60+
url: "https://randomuser.me/api/portraits/men/0.jpg",
61+
},
62+
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
63+
},
64+
{
65+
name: "Erik Armstrong",
66+
image: {
67+
url: "https://randomuser.me/api/portraits/men/0.jpg",
68+
},
69+
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
70+
},
71+
{
72+
name: "Erik Armstrong",
73+
image: {
74+
url: "https://randomuser.me/api/portraits/men/0.jpg",
75+
},
76+
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
77+
},
78+
{
79+
name: "Erik Armstrong",
80+
image: {
81+
url: "https://randomuser.me/api/portraits/men/0.jpg",
82+
},
83+
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
84+
},
85+
{
86+
name: "Erik Armstrong",
87+
image: {
88+
url: "https://randomuser.me/api/portraits/men/0.jpg",
89+
},
90+
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
91+
},
92+
];

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

+90-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import { Container } from "./styled";
22
import Navbar from "../../../Navbar";
3-
import { receivedRequests as RR, sentRequests as SR } from "./api";
3+
import {
4+
receivedRequests as RR,
5+
sentRequests as SR,
6+
searchResults as SRS,
7+
youMayKnow as MN,
8+
} from "./api";
49
import { useEffect, useState } from "react";
5-
import { IoClose, IoCheckmark, IoSearch } from "react-icons/io5";
10+
import { IoClose, IoCheckmark, IoSearch, IoFilter } from "react-icons/io5";
611

712
const Network = (props) => {
813
const [sentRequests, useSentRequests] = useState(SR);
914
const [receivedRequests, setReceivedRequests] = useState(RR);
15+
const [searchRequest, setSearchRequest] = useState(null);
16+
const [searchResults, setSearchResults] = useState(null);
17+
const [youMayKnow, setYouMayKnow] = useState(MN);
1018

1119
const [scrollPos, setScrollPos] = useState({
1220
start: true,
@@ -158,11 +166,87 @@ const Network = (props) => {
158166
<main className="main-panel">
159167
<div className="main-content">
160168
<div className="header-container">
161-
<h1>
162-
Results For <span>Lorem Ipsum Dolor:</span>
163-
</h1>
169+
{searchResults ? (
170+
<h1>
171+
Results For <span>{searchRequest}</span>
172+
</h1>
173+
) : (
174+
<h1>People you may know</h1>
175+
)}
176+
</div>
177+
<div className="content">
178+
<div className="filters">
179+
<div className="filter">
180+
<div className="filter-icon-wrapper">
181+
<IoFilter size={20} />
182+
</div>
183+
<span className="filter-name">lorem ipsum</span>
184+
</div>
185+
<div className="filter">
186+
<div className="filter-icon-wrapper">
187+
<IoFilter size={20} />
188+
</div>
189+
<span className="filter-name">lorem ipsum</span>
190+
</div>
191+
<div className="filter">
192+
<div className="filter-icon-wrapper">
193+
<IoFilter size={20} />
194+
</div>
195+
<span className="filter-name">lorem ipsum</span>
196+
</div>
197+
<div className="filter">
198+
<div className="filter-icon-wrapper">
199+
<IoFilter size={20} />
200+
</div>
201+
<span className="filter-name">lorem ipsum</span>
202+
</div>
203+
<div className="filter">
204+
<div className="filter-icon-wrapper">
205+
<IoFilter size={20} />
206+
</div>
207+
<span className="filter-name">lorem ipsum</span>
208+
</div>
209+
</div>
210+
{searchResults ? (
211+
<div className="results">
212+
{searchResults.map((user) => {
213+
<div className="single-user">
214+
<div className="pictute-wrapper">
215+
<img src={user.image?.url} alt="user profile picture" />
216+
</div>
217+
218+
<div className="text-content">
219+
<div className="name-wrapper">
220+
<span className="name">{user.name}</span>
221+
</div>
222+
<div className="bio-wrapper">
223+
<span className="bio">{user.bio}</span>
224+
</div>
225+
</div>
226+
</div>;
227+
})}
228+
</div>
229+
) : (
230+
<div className="results">
231+
{youMayKnow.map((user) => (
232+
<div className="single-user">
233+
<div className="pictute-wrapper">
234+
<img src={user.image?.url} alt="user profile picture" />
235+
</div>
236+
237+
<div className="text-content">
238+
<div className="name-wrapper">
239+
<span className="name">{user.name}</span>
240+
</div>
241+
<div className="bio-wrapper">
242+
<span className="bio">{user.bio}</span>
243+
</div>
244+
</div>
245+
</div>
246+
))}
247+
</div>
248+
)}
164249
</div>
165-
<div className="content"></div>
166250
</div>
167251
</main>
168252
</div>

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

+80
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,9 @@ export const Container = styled.div`
275275
background-color: #ebebeb;
276276
height: 100%;
277277
width: 100%;
278+
display: flex;
279+
flex-direction: column;
280+
row-gap: 1rem;
278281
.header-container {
279282
& ::selection {
280283
background-color: #ebebeb;
@@ -305,6 +308,83 @@ export const Container = styled.div`
305308
margin-left: 1rem;
306309
}
307310
}
311+
.content {
312+
display: flex;
313+
flex-direction: column;
314+
row-gap: 1rem;
315+
.filters {
316+
min-height: 60px;
317+
flex: 1 1 1;
318+
display: flex;
319+
padding: 0.5rem;
320+
column-gap: 0.5rem;
321+
row-gap: 0.5rem;
322+
flex-wrap: wrap;
323+
324+
.filter {
325+
flex: 1 1 19%;
326+
max-width: 300px;
327+
margin: 0 auto;
328+
background-color: #d2d2d2;
329+
display: flex;
330+
align-items: center;
331+
justify-content: space-between;
332+
padding: 0 0.5rem;
333+
.filter-icon-wrapper {
334+
width: 40px;
335+
height: 40px;
336+
display: grid;
337+
place-items: center;
338+
& > * {
339+
color: #1c5c7e;
340+
}
341+
}
342+
.filter-name {
343+
color: #1c5c7e;
344+
font-weight: 500;
345+
margin: 0 auto;
346+
}
347+
}
348+
}
349+
.results {
350+
flex: 1 1 1;
351+
display: flex;
352+
flex-wrap: wrap;
353+
column-gap: 0.5rem;
354+
row-gap: 0.5rem;
355+
padding: 0.5rem;
356+
margin-bottom: 50px;
357+
.single-user {
358+
flex: 1 1 400px;
359+
box-shadow: 0 0 5px #2a2a2a80;
360+
display: flex;
361+
padding: 0.4rem 1rem;
362+
column-gap: 1rem;
363+
.pictute-wrapper {
364+
flex: 1 0 1;
365+
width: 100px;
366+
img {
367+
width: 100%;
368+
}
369+
}
370+
.text-content {
371+
width: 100%;
372+
display: flex;
373+
flex-direction: column;
374+
row-gap: 0.5rem;
375+
.name-wrapper {
376+
.name {
377+
color: #1c5c7e;
378+
font-weight: 600;
379+
}
380+
}
381+
.bio-wrapper {
382+
font-size: 14px;
383+
}
384+
}
385+
}
386+
}
387+
}
308388
}
309389
}
310390
}

‎src/components/Network.jsx

-67
This file was deleted.

0 commit comments

Comments
 (0)