Step 3
Create the following files with the provided content. Notice that I have already created style sheet for each component to save us time!
Search.js
import "./Search.css";
function Search() {
return <div>Search</div>;
}
export default Search;
Search.css
.search-meetings {
width: 100%;
padding: 20px 20px 20px 60px;
background-image: url("./icons/search.svg");
background-repeat: no-repeat;
background-position: 20px center;
background-size: 1.2em;
font-size: 1.2em;
border: 0;
outline: none;
}
Meeting.js
import "./Meeting.css";
function Meeting() {
return <div>Meeting Information</div>;
}
export default Meeting;
Meeting.css
.meeting-list-item {
padding: 20px;
background: white;
display: flex;
}
@media (min-width: 600px) {
.meeting-list-item {
margin: 20px;
border: 1px solid #d5d8df;
border-radius: 4px;
}
}
.meeting-details {
padding-left: 20px;
border-left: 1px solid #eee;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.meeting-details p {
margin: 0;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.meeting-details .title {
font-size: larger;
}
.meeting-details a {
color: #003f62;
font-family: helvetica;
text-decoration: none;
}
.meeting-details a:hover {
text-decoration: underline;
}
.meeting-details a:active {
color: #003f62;
}
.meeting-details a:visited {
color: #003f62;
}
.meeting-remove {
padding-left: 20px;
align-self: center;
width: 32px;
height: 32px;
background-color: transparent;
background-image: url("./icons/cancel.svg");
background-size: 100% 100%;
border: 0;
color: black;
font-size: 0;
vertical-align: middle;
cursor: pointer;
outline: none;
}
ListMeetings.js
import "./ListMeetings.css";
import Search from "./Search.js";
import Meeting from "./Meeting.js";
function ListMeetings() {
return (
<div className="list-meetings">
<div className="list-meetings-top">
<Search />
</div>
<ol className="meeting-list">
<Meeting />
</ol>
</div>
);
}
export default ListMeetings;
ListMeetings.css
.list-meetings {
padding-top: 60px;
}
.list-meetings-top {
position: fixed;
width: 100%;
top: 0;
border-bottom: 1px solid #d5d8df;
display: flex;
}
.meeting-list {
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}