Skip to content
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions components/NavBar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import GenericClosePopUp from '../Close-popup/GenericClosePopUp';
const NavBar = ({ personData: { photo } }) => {
const RDSLogo = '/assets/Real-Dev-Squad1x.png';
const [toggle, setToggle] = useState(false);
const [count, setCount] = useState(15);

const navbarRef = useRef();
GenericClosePopUp(navbarRef, () => {
setToggle(false);
Expand Down Expand Up @@ -51,11 +53,11 @@ const NavBar = ({ personData: { photo } }) => {
toggle ? styles.dropdownContent : styles.dropdownContentHide
}
>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="">Profile</a>
<a href="/notification">Notifications <span className={styles.notificationNumbers}>{count}</span></a>
<a href="#">Setting</a>
<a href="#">Orders</a>
<a href="#">Log Out</a>
</div>
</div>
</nav>
Expand Down
14 changes: 11 additions & 3 deletions components/NavBar/navbar.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -54,17 +54,25 @@
}
.dropdownContent a {
color: black;
padding: 5px 0;
padding: 5px 4px;
text-decoration: none;
text-align: center;
font-size: 18px;
font-size: 14px;
border-bottom: 1px solid rgba(0, 0, 0, 0.26);
display: block;
}
.dropdownContent a:hover {
background-color: #e4e2e2
}

.notificationNumbers{
background-color: #041484;
color: white;
border: none;
border-radius: 50%;
padding: .3em;
font-size: .8em;
text-align: center;
}

@media (max-width: 540px) {
.navBar li {
Expand Down
126 changes: 126 additions & 0 deletions pages/notification.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import React from 'react';
import personData from '../mock/person.json';
import NavBar from '@components/NavBar';

export default function notification() {
return (
<div className="container">
<NavBar personData={personData} />
<div className="notification">
<ul>
<li>
<div className="notificationArea">
<h4>Rohit has requested RDS 200 from you</h4>
<div className="buttons">
<button className="approve">Approve</button>
<button className="discard">Discard</button>
</div>
</div>
</li>
<li>
<div className="notificationArea">
<h4>Rohit has requested RDS 200 from you</h4>
<div className="buttons">
<button className="approve">Approve</button>
<button className="discard">Discard</button>
</div>
</div>
</li>
<li>
<div className="notificationArea">
<h4>Rohit has requested RDS 200 from you</h4>
<div className="buttons">
<button className="approve">Approve</button>
<button className="discard">Discard</button>
</div>
</div>
</li>
<li>
<div className="notificationArea">
<h4>Rohit has requested RDS 200 from you</h4>
<div className="buttons">
<button className="approve">Approve</button>
<button className="discard">Discard</button>
</div>
</div>
</li>
<li>
<div className="notificationArea">
<h4>Rohit has requested RDS 200 from you</h4>
<div className="buttons">
<button className="approve">Approve</button>
<button className="discard">Discard</button>
</div>
</div>
</li>
<li>
<div className="notificationArea">
<h4>Rohit has requested RDS 200 from you</h4>
<div className="buttons">
<button className="approve">Approve</button>
<button className="discard">Discard</button>
</div>
</div>
</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we please refactor this? li has a similar pattern throughout. Maybe create a new function that returns this li and call that function 4-5 times, or create a component and call that component 4-5 times.

That will make this code much more clean and readable.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok thnks. I will make the changes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sumitd94 Changes has been made. Please check.

</ul>
</div>
<style jsx>
{`
.notification {
margin: auto;
padding: 0;
width: 50%;
min-height: auto;
border: 0.15em solid rgba(128, 128, 128, 0.5);
}
.notification ul {
margin: 0;
padding: 0;
}
.notification ul li {
list-style-type: none;
border-bottom: 0.1em solid rgba(128, 128, 128, 0.137);
padding: 5px;
}
.notification ul li:hover {
background-color: rgba(214, 212, 212, 0.308);
}
.notificationArea h4 {
margin: 0;
padding: 10px;
}
.buttons {
margin-left: 0.5em;
}
.approve {
background-color: #2ecc71;
text-align: center;
border: none;
outline: none;
cursor: pointer;
padding: 0.5em;
border-radius: 0.3em;
font-weight: 600;
}
.discard {
background-color: #ff3838;
text-align: center;
border: none;
outline: none;
cursor: pointer;
padding: 0.5em;
border-radius: 0.3em;
font-weight: 600;
margin-left: 0.5em;
}
@media only screen and (max-width: 600px) {
.notification {
width: 80%;
margin-top: 3em;
}
}
`}
</style>
</div>
);
}