-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #239 from Ronnie018/network-page-wireframe
Network page wireframe
- Loading branch information
Showing
4 changed files
with
509 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| 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.", | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,173 @@ | ||
| // import { useEffect, useRef } from 'react'; | ||
| import { Container } from "./styled"; | ||
| import Navbar from "../../../Navbar"; | ||
| import { receivedRequests as RR, sentRequests as SR } from "./api"; | ||
| import { useEffect, useState } from "react"; | ||
| import { IoClose, IoCheckmark, IoSearch } from "react-icons/io5"; | ||
|
|
||
| const Parallax = (props) => { | ||
| return <Container></Container>; | ||
| const Network = (props) => { | ||
| const [sentRequests, useSentRequests] = useState(SR); | ||
| const [receivedRequests, setReceivedRequests] = useState(RR); | ||
|
|
||
| const [scrollPos, setScrollPos] = useState({ | ||
| start: true, | ||
| end: false, | ||
| }); | ||
|
|
||
| return ( | ||
| <Container> | ||
| <Navbar /> | ||
| <div className="wrapper"> | ||
| <div className="left-box"> | ||
| <div className="left-content"> | ||
| <div className="header-container"> | ||
| <h1>Users Network</h1> | ||
| </div> | ||
| <div className="search-container"> | ||
| <div className="outline"> | ||
| <input type="text" placeholder="Search for users" /> | ||
| </div> | ||
| <button | ||
| className="search-btn" | ||
| onClick={(e) => { | ||
| console.log("should search user"); | ||
| }} | ||
| > | ||
| <IoSearch className="icon" size={20} color="#d9d9d9" /> | ||
| </button> | ||
| </div> | ||
| <div | ||
| className="sections" | ||
| onScroll={(e) => { | ||
| 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 && ( | ||
| <section className="section"> | ||
| <div className="sections-header-container"> | ||
| <h1>Requests</h1> | ||
| </div> | ||
| {sentRequests.map((request, i) => { | ||
| return ( | ||
| <div | ||
| className="request-container" | ||
| key={`${request.name}-${i}`} | ||
| > | ||
| <div className="img-wrapper"> | ||
| <img | ||
| src={ | ||
| request?.image?.url || | ||
| "https://via.placeholder.com/150" | ||
| } | ||
| alt="" | ||
| /> | ||
| </div> | ||
|
|
||
| <span className="name"> | ||
| {request.name} | ||
| <div className="popup"> | ||
| <div className="img-wrapper"> | ||
| <img | ||
| src={ | ||
| request.image?.url || | ||
| "https://via.placeholder.com/150" | ||
| } | ||
| alt="" | ||
| /> | ||
| </div> | ||
| <div className="content-wrapper"> | ||
| <div className="name">{request.name}</div> | ||
| <div className="bio">{request.bio}</div> | ||
| </div> | ||
| </div> | ||
| </span> | ||
|
|
||
| <div className="options"> | ||
| <IoCheckmark className="icon icon-accept" /> | ||
| <IoClose className="icon icon-reject" /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| })} | ||
| </section> | ||
| )} | ||
| {receivedRequests && ( | ||
| <section className="section"> | ||
| <div className="sections-header-container"> | ||
| <h1>Pending</h1> | ||
| </div> | ||
| {receivedRequests.map((request, i) => { | ||
| return ( | ||
| <div | ||
| className="request-container" | ||
| key={`${request.name}-${i}`} | ||
| > | ||
| <div className="img-wrapper"> | ||
| <img | ||
| src={ | ||
| request.image?.url || | ||
| "https://via.placeholder.com/150" | ||
| } | ||
| alt="" | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="middle"> | ||
| <div className="popup"> | ||
| <div className="img-wrapper"> | ||
| <img | ||
| src={ | ||
| request.image?.url || | ||
| "https://via.placeholder.com/150" | ||
| } | ||
| alt="" | ||
| /> | ||
| </div> | ||
| <div className="content-wrapper"> | ||
| <div className="name">{request.name}</div> | ||
| <div className="bio">{request.bio}</div> | ||
| </div> | ||
| </div> | ||
| <span className="name">{request.name}</span> | ||
| <span className="status">pending</span> | ||
| </div> | ||
|
|
||
| <div className="options received"> | ||
| <IoClose className="icon icon-reject" /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| })} | ||
| </section> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <main className="main-panel"> | ||
| <div className="main-content"> | ||
| <div className="header-container"> | ||
| <h1> | ||
| Results For <span>Lorem Ipsum Dolor:</span> | ||
| </h1> | ||
| </div> | ||
| <div className="content"></div> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| </Container> | ||
| ); | ||
| }; | ||
|
|
||
| export default Parallax; | ||
| export default Network; |
Oops, something went wrong.