diff --git a/src/components/Functionalities/pages/Network/api.js b/src/components/Functionalities/pages/Network/api.js index fc3c7a0..64879f1 100644 --- a/src/components/Functionalities/pages/Network/api.js +++ b/src/components/Functionalities/pages/Network/api.js @@ -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.", + }, +]; diff --git a/src/components/Functionalities/pages/Network/index.jsx b/src/components/Functionalities/pages/Network/index.jsx index a3f5bbe..c493a5a 100644 --- a/src/components/Functionalities/pages/Network/index.jsx +++ b/src/components/Functionalities/pages/Network/index.jsx @@ -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, @@ -158,11 +166,87 @@ const Network = (props) => {
-

- Results For Lorem Ipsum Dolor: -

+ {searchResults ? ( +

+ Results For {searchRequest} +

+ ) : ( +

People you may know

+ )} +
+
+
+
+
+ +
+ lorem ipsum +
+
+
+ +
+ lorem ipsum +
+
+
+ +
+ lorem ipsum +
+
+
+ +
+ lorem ipsum +
+
+
+ +
+ lorem ipsum +
+
+ {searchResults ? ( +
+ {searchResults.map((user) => { +
+
+ user profile picture +
+ +
+
+ {user.name} +
+
+ {user.bio} +
+
+
; + })} +
+ ) : ( +
+ {youMayKnow.map((user) => ( +
+
+ user profile picture +
+ +
+
+ {user.name} +
+
+ {user.bio} +
+
+
+ ))} +
+ )}
-
diff --git a/src/components/Functionalities/pages/Network/styled.jsx b/src/components/Functionalities/pages/Network/styled.jsx index 06b7244..14acd63 100644 --- a/src/components/Functionalities/pages/Network/styled.jsx +++ b/src/components/Functionalities/pages/Network/styled.jsx @@ -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; @@ -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; + } + } + } + } + } } } } diff --git a/src/components/Network.jsx b/src/components/Network.jsx deleted file mode 100644 index 272baee..0000000 --- a/src/components/Network.jsx +++ /dev/null @@ -1,67 +0,0 @@ -import { - Container, - QueryBox, - QueryBoxHeader, - QueryOptions, - ShowQueryBox, - ShowQueryBoxHeader, - QueriedItems, - QueryResult, -} from "../styles/stylesNetwork"; - -const Network = () => { - return ( - - - -

Users Network

- - -
-

Search Box

-
-

My Network

-
-

Status Pending

-
-

Request Pending

-
-

People You May Know

- - - - -

Will display what the User Queried

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default Network; diff --git a/src/components/Network/api.js b/src/components/Network/api.js new file mode 100644 index 0000000..64879f1 --- /dev/null +++ b/src/components/Network/api.js @@ -0,0 +1,92 @@ +export const receivedRequests = [ + { + name: "Leta Dean", + image: { + url: "https://randomuser.me/api/portraits/women/79.jpg", + }, + bio: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. corrupti earum officiis. Ad cum error natus asperiores quidem?", + }, + { + 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 sentRequests = [ + { + 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 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.", + }, +]; diff --git a/src/components/Network/index.jsx b/src/components/Network/index.jsx new file mode 100644 index 0000000..0471d75 --- /dev/null +++ b/src/components/Network/index.jsx @@ -0,0 +1,257 @@ +import { Container } from "./styled"; +import Navbar from "../Navbar"; +import { + receivedRequests as RR, + sentRequests as SR, + searchResults as SRS, + youMayKnow as MN, +} from "./api"; +import { useEffect, useState } from "react"; +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, + end: false, + }); + + return ( + + +
+
+
+
+

Users Network

+
+
+
+ +
+ +
+
{ + const calc = e.target.scrollHeight - e.target.offsetHeight; + if (e.target.scrollTop === calc) { + setScrollPos(({ start, end }) => { + return { start, end: true }; + }); + } else if (e.target.scrollTop === 0) { + setScrollPos(({ start, end }) => { + return { start: true, end }; + }); + } else { + setScrollPos(() => { + return { start: false, end: false }; + }); + } + }} + > + {sentRequests && ( +
+
+

Requests

+
+ {sentRequests.map((request, i) => { + return ( +
+
+ +
+ + + {request.name} +
+
+ +
+
+
{request.name}
+
{request.bio}
+
+
+ + +
+ + +
+
+ ); + })} +
+ )} + {receivedRequests && ( +
+
+

Pending

+
+ {receivedRequests.map((request, i) => { + return ( +
+
+ +
+ +
+
+
+ +
+
+
{request.name}
+
{request.bio}
+
+
+ {request.name} + pending +
+ +
+ +
+
+ ); + })} +
+ )} +
+
+
+
+
+
+ {searchResults ? ( +

+ Results For {searchRequest} +

+ ) : ( +

People you may know

+ )} +
+
+
+
+
+ +
+ lorem ipsum +
+
+
+ +
+ lorem ipsum +
+
+
+ +
+ lorem ipsum +
+
+
+ +
+ lorem ipsum +
+
+
+ +
+ lorem ipsum +
+
+ {searchResults ? ( +
+ {searchResults.map((user) => { +
+
+ user profile picture +
+ +
+
+ {user.name} +
+
+ {user.bio} +
+
+
; + })} +
+ ) : ( +
+ {youMayKnow.map((user) => ( +
+
+ user profile picture +
+ +
+
+ {user.name} +
+
+ {user.bio} +
+
+
+ ))} +
+ )} +
+
+
+
+ + ); +}; + +export default Network; diff --git a/src/components/Network/styled.jsx b/src/components/Network/styled.jsx new file mode 100644 index 0000000..14acd63 --- /dev/null +++ b/src/components/Network/styled.jsx @@ -0,0 +1,391 @@ +import styled from "styled-components"; + +export const Container = styled.div` + @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); + padding-top: calc(3rem - 5px); + border: 1px solid green; + background-color: #c1c1c1; + overflow: scroll; + .navbar { + * ::selection { + background-color: #ebebeb; + color: #077a7a; + } + } + &, + * { + box-sizing: border-box; + transition: 120ms ease-in-out; + font-family: "Inter", sans-serif; + } + * ::selection { + background-color: #077a7a; + color: #ffffff; + } + .wrapper { + width: 100%; + min-height: calc(100vh - 3rem + 3px); + max-width: 1300px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + .left-box { + flex: 1 2 300px; + padding: 0.6rem; + margin: 0 auto; + max-width: 300px; + .left-content { + box-shadow: 1px 1px 15px #046b6b28; + background-color: #ebebeb; + height: 100%; + width: 100%; + position: relative; + .header-container { + & ::selection { + background-color: #ebebeb; + color: #077a7a; + } + &::before { + content: ""; + position: absolute; + width: 20px; + height: 20px; + background-color: #077a7a; + bottom: -10px; + left: 0; + transform: rotateY("45deg"); + clip-path: polygon(56% 0, 55% 100%, 3% 51%, 4% 0); + } + background-color: #077a7a; + width: calc(100% + 10px); + right: 0; + padding: 0.8rem 1rem; + display: flex; + transform: translateX(-10px); + justify-content: flex-start; + h1 { + font-weight: 500; + font-size: 1.8rem; + color: #ededed; + margin-left: 1rem; + } + } + .search-container { + display: flex; + padding: 1rem; + column-gap: 0.2rem; + .outline { + flex: 1 1 1; + width: 100%; + input { + width: 100%; + text-indent: 1rem; + font-size: 18px; + font-weight: 300; + &::placeholder { + font-size: 18px; + font-weight: 300; + color: #2e2e2e95; + } + height: 40px; + border: 2px solid #0087875d; + &:focus, + &:focus-visible, + &:focus-within { + outline: none; + transform: scale(1.01); + } + } + } + .search-btn { + width: 40px; + height: 40px; + flex: 0 0 40px; + background-color: #009999; + border: none; + &:hover { + background-color: #008484; + } + &:active { + background-color: #009b9b; + transform: scale(0.95); + } + .icon { + border: none; + } + } + } + .sections { + box-shadow: 0 0 5px #00000036; + position: relative; + max-height: 430px; + overflow-y: scroll; + .section { + width: 100%; + display: flex; + flex-direction: column; + row-gap: 1rem; + margin-bottom: 2rem; + .sections-header-container { + background-color: #077a7a9e; + padding: 0.5rem; + & ::selection { + background-color: #ebebeb; + color: #077a7a; + } + h1 { + margin-left: 1rem; + color: #ffffff; + letter-spacing: 1.5px; + font-weight: 400; + } + } + .request-container { + background-color: #d2d2d2; + display: flex; + column-gap: 1rem; + justify-content: space-between; + align-items: center; + padding: 0 1rem; + .img-wrapper { + width: 40px; + img { + transform: scale(1.2) translateY(2px); + border: 2px solid #18939386; + width: 100%; + &:hover { + transform: scale(1.5) translateY(2px); + } + } + } + .middle { + display: flex; + flex: 1 1 0; + flex-wrap: wrap; + flex-direction: column; + position: relative; + &:hover { + .popup { + display: flex; + } + } + .popup { + bottom: 0; + left: -50px; + } + .status { + font-size: 12px; + font-weight: 200; + } + } + .popup { + display: none; + background-color: #077a7a; + width: 180px; + height: 200px; + position: absolute; + z-index: 10; + padding: 0.5rem; + column-gap: 0.5rem; + + .img-wrapper { + flex: 1 0 45px; + height: 100%; + } + .content-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + row-gap: 0.4rem; + .name { + color: #ededed; + flex: 0 1 10px; + } + .bio { + flex: 1 1 10px; + font-size: 11px; + color: #d2d2d2; + font-weight: 200; + } + } + } + + .name { + flex: 1 1 0; + font-size: 12px; + font-weight: 600; + color: #1c5c7e; + position: relative; + &:hover { + .popup { + display: flex; + } + } + .popup { + top: 0; + left: -50px; + } + } + + .options { + flex: 0 0 40px; + display: flex; + justify-content: space-between; + .icon { + transition: 50ms ease-in-out; + width: 18px; + height: 18px; + &:hover { + transform: scale(1.05); + opacity: 90%; + } + &:active { + transform: scale(0.98); + } + &.icon-reject { + background-color: white; + color: #009999; + &:hover { + border: 0.2px solid #009999; + } + } + &.icon-accept { + background-color: #009999; + color: white; + &:hover { + border: 0.2px solid #ffffff; + } + } + } + + &.received { + justify-content: flex-end; + } + } + } + } + } + } + } + .main-panel { + flex: 6 1 300px; + padding: 0.6rem; + .main-content { + box-shadow: 1px 1px 15px #046b6b28; + background-color: #ebebeb; + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + row-gap: 1rem; + .header-container { + & ::selection { + background-color: #ebebeb; + color: #077a7a; + } + &::before { + content: ""; + position: absolute; + width: 20px; + height: 20px; + background-color: #077a7a; + bottom: -10px; + left: 0; + transform: rotateY("45deg"); + clip-path: polygon(56% 0, 55% 100%, 3% 51%, 4% 0); + } + background-color: #077a7a; + width: calc(100% + 10px); + right: 0; + padding: 0.8rem 1rem; + display: flex; + transform: translateX(-10px); + justify-content: flex-start; + h1 { + font-weight: 500; + font-size: 1.8rem; + color: #ededed; + 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; + } + } + } + } + } + } + } + } +`;