Skip to content

Commit

Permalink
Merge pull request #240 from Ronnie018/network-page-wireframe
Browse files Browse the repository at this point in the history 
Network page wireframe
  • Loading branch information
@Ronnie018
Ronnie018 authored Jan 12, 2023
2 parents ddcce0a + 4e64e6c commit 96f876f
Show file tree
Hide file tree
Showing 7 changed files with 970 additions and 73 deletions.
60 changes: 60 additions & 0 deletions src/components/Functionalities/pages/Network/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,63 @@ export const sentRequests = [
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
},
];
export const searchResults = [
{
name: "Deanna Scott",
image: {
url: "https://randomuser.me/api/portraits/women/82.jpg",
},
bio: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Um officiis dolor vel molestias quidem dicta perferendis praesentium inventore",
},
{
name: "Erik Armstrong",
image: {
url: "https://randomuser.me/api/portraits/men/0.jpg",
},
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
},
];
export const youMayKnow = [
{
name: "Deanna Scott",
image: {
url: "https://randomuser.me/api/portraits/women/82.jpg",
},
bio: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Um officiis dolor vel molestias quidem dicta perferendis praesentium inventore",
},
{
name: "Erik Armstrong",
image: {
url: "https://randomuser.me/api/portraits/men/0.jpg",
},
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
},
{
name: "Erik Armstrong",
image: {
url: "https://randomuser.me/api/portraits/men/0.jpg",
},
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
},
{
name: "Erik Armstrong",
image: {
url: "https://randomuser.me/api/portraits/men/0.jpg",
},
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
},
{
name: "Erik Armstrong",
image: {
url: "https://randomuser.me/api/portraits/men/0.jpg",
},
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
},
{
name: "Erik Armstrong",
image: {
url: "https://randomuser.me/api/portraits/men/0.jpg",
},
bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.",
},
];
96 changes: 90 additions & 6 deletions src/components/Functionalities/pages/Network/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
import { Container } from "./styled";
import Navbar from "../../../Navbar";
import { receivedRequests as RR, sentRequests as SR } from "./api";
import {
receivedRequests as RR,
sentRequests as SR,
searchResults as SRS,
youMayKnow as MN,
} from "./api";
import { useEffect, useState } from "react";
import { IoClose, IoCheckmark, IoSearch } from "react-icons/io5";
import { IoClose, IoCheckmark, IoSearch, IoFilter } from "react-icons/io5";

const Network = (props) => {
const [sentRequests, useSentRequests] = useState(SR);
const [receivedRequests, setReceivedRequests] = useState(RR);
const [searchRequest, setSearchRequest] = useState(null);
const [searchResults, setSearchResults] = useState(null);
const [youMayKnow, setYouMayKnow] = useState(MN);

const [scrollPos, setScrollPos] = useState({
start: true,
Expand Down Expand Up @@ -158,11 +166,87 @@ const Network = (props) => {
<main className="main-panel">
<div className="main-content">
<div className="header-container">
<h1>
Results For <span>Lorem Ipsum Dolor:</span>
</h1>
{searchResults ? (
<h1>
Results For <span>{searchRequest}</span>
</h1>
) : (
<h1>People you may know</h1>
)}
</div>
<div className="content">
<div className="filters">
<div className="filter">
<div className="filter-icon-wrapper">
<IoFilter size={20} />
</div>
<span className="filter-name">lorem ipsum</span>
</div>
<div className="filter">
<div className="filter-icon-wrapper">
<IoFilter size={20} />
</div>
<span className="filter-name">lorem ipsum</span>
</div>
<div className="filter">
<div className="filter-icon-wrapper">
<IoFilter size={20} />
</div>
<span className="filter-name">lorem ipsum</span>
</div>
<div className="filter">
<div className="filter-icon-wrapper">
<IoFilter size={20} />
</div>
<span className="filter-name">lorem ipsum</span>
</div>
<div className="filter">
<div className="filter-icon-wrapper">
<IoFilter size={20} />
</div>
<span className="filter-name">lorem ipsum</span>
</div>
</div>
{searchResults ? (
<div className="results">
{searchResults.map((user) => {
<div className="single-user">
<div className="pictute-wrapper">
<img src={user.image?.url} alt="user profile picture" />
</div>

<div className="text-content">
<div className="name-wrapper">
<span className="name">{user.name}</span>
</div>
<div className="bio-wrapper">
<span className="bio">{user.bio}</span>
</div>
</div>
</div>;
})}
</div>
) : (
<div className="results">
{youMayKnow.map((user) => (
<div className="single-user">
<div className="pictute-wrapper">
<img src={user.image?.url} alt="user profile picture" />
</div>

<div className="text-content">
<div className="name-wrapper">
<span className="name">{user.name}</span>
</div>
<div className="bio-wrapper">
<span className="bio">{user.bio}</span>
</div>
</div>
</div>
))}
</div>
)}
</div>
<div className="content"></div>
</div>
</main>
</div>
Expand Down
80 changes: 80 additions & 0 deletions src/components/Functionalities/pages/Network/styled.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,9 @@ export const Container = styled.div`
background-color: #ebebeb;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
row-gap: 1rem;
.header-container {
& ::selection {
background-color: #ebebeb;
Expand Down Expand Up @@ -305,6 +308,83 @@ export const Container = styled.div`
margin-left: 1rem;
}
}
.content {
display: flex;
flex-direction: column;
row-gap: 1rem;
.filters {
min-height: 60px;
flex: 1 1 1;
display: flex;
padding: 0.5rem;
column-gap: 0.5rem;
row-gap: 0.5rem;
flex-wrap: wrap;
.filter {
flex: 1 1 19%;
max-width: 300px;
margin: 0 auto;
background-color: #d2d2d2;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.5rem;
.filter-icon-wrapper {
width: 40px;
height: 40px;
display: grid;
place-items: center;
& > * {
color: #1c5c7e;
}
}
.filter-name {
color: #1c5c7e;
font-weight: 500;
margin: 0 auto;
}
}
}
.results {
flex: 1 1 1;
display: flex;
flex-wrap: wrap;
column-gap: 0.5rem;
row-gap: 0.5rem;
padding: 0.5rem;
margin-bottom: 50px;
.single-user {
flex: 1 1 400px;
box-shadow: 0 0 5px #2a2a2a80;
display: flex;
padding: 0.4rem 1rem;
column-gap: 1rem;
.pictute-wrapper {
flex: 1 0 1;
width: 100px;
img {
width: 100%;
}
}
.text-content {
width: 100%;
display: flex;
flex-direction: column;
row-gap: 0.5rem;
.name-wrapper {
.name {
color: #1c5c7e;
font-weight: 600;
}
}
.bio-wrapper {
font-size: 14px;
}
}
}
}
}
}
}
}
Expand Down
67 changes: 0 additions & 67 deletions src/components/Network.jsx
View file

This file was deleted.

Loading

0 comments on commit 96f876f

Please sign in to comment.