Contacts App ب React js الجزء الثاني
نظرة سريعة بالفيديو
1- إضافة CSS للصفحة الرئيسية ديالنا
//
body{
background-color: #d4d4d4;
}
.contact-list{
list-style: none;
width: 60%;
background-color: #f8f3f3;
padding: 10px 15px 10px 15px;
margin: 0 auto;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.contact-list li{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: white;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.contact-image{
margin-right: 10px;
}
.buttonAdd{
margin: auto;
margin-top: 10px;
}
.buttonRemove{
margin: auto;
margin-top: 20px;
}
.remove{
border: 1px solid rgb(182, 87, 87);
background-color: beige;
color: rgb(182, 87, 87);
font-weight: bolder;
width: 50px;
height: 50px;
border-radius: 50px;
padding: 5px;
}
.remove:hover{
background-color:rgb(182, 87, 87);
color: white;
cursor: pointer;
}
.searchbar,
.show-results{
display: flex;
flex-direction: row;
list-style: none;
width: 60%;
background-color: #f8f3f3;
padding: 10px 15px 10px 15px;
margin: 0 auto;
border-top-left-radius: 5px ;
border-top-right-radius: 5px;
}
.searchbar input{
padding: 20px;
width: 95%;
border: 1px solid rgb(182, 87, 87);
border-radius: 5px;
margin: 0 auto;
}
.showAll{
border: none;
background-color: beige;
color: rgb(19, 109, 211);
margin: 0px 10px 0 0;
cursor: pointer;
}
a{
text-decoration: none;
}
.show-details{
margin: auto;
margin-top: 20px;
}
.show{
background-color: beige;
color: rgb(182, 87, 87);
font-weight: bolder;
padding: 5px;
border-radius: 5px;
}
.show:hover{
background-color:rgb(182, 87, 87);
color: white;
cursor: pointer;
}
2- عرض المعلومات الخاصة ب contact
//
import React,{Component} from 'react';
import {Link} from 'react-router-dom';
import './ContactDetails.css';
class ContactDetails extends Component{
state = {
contact : null
}
clearStorage = () =>{
localStorage.removeItem('contact');
}
componentWillMount(){
this.setState({
contact : JSON.parse(localStorage.getItem('contact'))
})
}
render(){
return(
<div>
<Link to="/" class="back" onClick={() => this.clearStorage()}>
<i class="fas fa-arrow-left"></i>
</Link>
<div className="contact-details">
<div className="contact-header">
<img src={this.state.contact.picture.large} alt=""
style={{
height:'100px',
borderRadius:'100px'
}}
/>
<p><strong>Nom & Prénom :</strong> {this.state.contact.name.first} {this.state.contact.name.last}</p>
<p><strong>Email :</strong> {this.state.contact.email}</p>
<p><strong>Téléphone :</strong> {this.state.contact.cell}</p>
<p><strong>Age :</strong> {this.state.contact.dob.age}</p>
<p><strong>Adresse :</strong> {this.state.contact.location.street}</p>
<p><strong>Ville :</strong> {this.state.contact.location.city}</p>
</div>
<iframe title="carte" width="400" height="450" frameborder="0"
src={`https://www.google.com/maps/embed/v1/place?&q=${this.state.contact.location.coordinates.latitude},${this.state.contact.location.coordinates.longitude}&zoom=6&key=AIzaSyCxvKM3rRpD_KqwANDtvBsL7vqJXUaKFpM`}
allowfullscreen>
</iframe>
</div>
</div>
)
}
}
export default ContactDetails;
3- إضافة CSS للصفحة الخاصة بعرض contact
//
.contact-details{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
width: 30%;
padding: 20px;
margin: 0 auto;
border-radius: 5px;
}
.back{
background-color: white;
padding: 8px;
margin: 0 auto;
border-radius: 5px;
text-decoration: none;
}
4- إضافة fontawesome ل app
//
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">