Created
March 2, 2022 13:20
-
-
Save DevMonzer/9515edf7a6cfe9f82c104464a5b5b4de to your computer and use it in GitHub Desktop.
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
.celebrities-component { | |
background-image: url('../../img/background.JPG'); | |
background-position: center center; | |
background-repeat: repeat; | |
background-size: 100% 100%; | |
overflow: hidden; | |
} | |
.celebrities-container { | |
display: grid; | |
grid-template-columns: repeat(5, minmax(3.5rem, 1fr)); | |
place-items: center; | |
position: relative; | |
color: black; | |
} | |
.container { | |
margin-bottom: 2rem; | |
} | |
.celebrities-img { | |
width: 9rem; | |
height: 9rem; | |
border-radius: 50%; | |
border: 8px solid var(--color-black); | |
} | |
.block-container { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
.celebrities-img:hover { | |
border: 8px solid var(--color-grey-light); | |
} | |
.celebrities-paragraph { | |
color: rgb(255, 171, 15); | |
text-align: center; | |
display: block; | |
font-size: 1.3rem; | |
font-weight: bold; | |
padding-top: 0.5rem; | |
} | |
h6 { | |
font-size: 1.5rem; | |
text-align: center; | |
} | |
button { | |
background-color: transparent; | |
border: none; | |
} | |
/************************************************* Dialog *************************************************/ | |
.dialog-container { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
color: var(--color-black); | |
} | |
.celebrities-image { | |
width: 9rem; | |
height: 9rem; | |
border-radius: 10px; | |
} | |
.voting-btn { | |
padding: 0.5rem 1rem; | |
border-radius: 5px; | |
color: var(--color-white); | |
background-color: var(--color-black); | |
transition: 0.3s; | |
} | |
.voting-btn:hover { | |
background-color: rgb(255, 171, 15); | |
color: var(--color-black); | |
} | |
.dialog-paragraph { | |
margin-top: -1rem; | |
font-size: 1.5rem; | |
font-weight: 700; | |
} | |
.dialog-text { | |
padding: 1rem 0 0 0; | |
} | |
/*********************** RESPONSIVENEES ***********************/ | |
@media only screen and (max-width: 2560px) { | |
.celebrities-container { | |
display: grid; | |
grid-template-columns: repeat(5, 1fr); | |
place-items: center; | |
padding: 1rem; | |
position: relative; | |
justify-content: center; | |
align-items: center; | |
} | |
} | |
@media only screen and (max-width: 900px) { | |
.celebrities-img { | |
width: 8rem; | |
height: 8rem; | |
border: 5px solid var(--color-black); | |
} | |
.celebrities-img:hover { | |
border: 5px solid var(--color-grey-light); | |
} | |
.celebrities-paragraph { | |
margin-top: -0.5rem; | |
} | |
/*********************** POPUP ************************/ | |
.click-me { | |
width: 5rem; | |
height: 2.5rem; | |
margin-left: 1.4rem; | |
} | |
.content { | |
left: -12%; | |
} | |
} | |
@media only screen and (max-width: 800px) { | |
.celebrities-img { | |
width: 7rem; | |
height: 7rem; | |
border: 5px solid var(--color-black); | |
} | |
.celebrities-img:hover { | |
border: 5px solid var(--color-grey-light); | |
} | |
.celebrities-paragraph { | |
font-size: 1rem; | |
} | |
} | |
@media only screen and (max-width: 700px) { | |
.celebrities-img { | |
width: 6rem; | |
height: 6rem; | |
} | |
/*********************** POPUP ************************/ | |
.click-me { | |
width: 3.8rem; | |
height: 2rem; | |
margin-left: 0.9rem; | |
} | |
.content { | |
width: 28rem; | |
left: -15%; | |
} | |
} | |
@media only screen and (max-width: 600px) { | |
.celebrities-img { | |
width: 5.5rem; | |
height: 5.5rem; | |
} | |
} | |
@media only screen and (max-width: 550px) { | |
.celebrities-paragraph { | |
font-size: 0.8rem; | |
font-weight: normal; | |
margin-top: -0.6rem; | |
} | |
.celebrities-img { | |
width: 5rem; | |
height: 5rem; | |
} | |
} | |
@media only screen and (max-width: 500px) { | |
.celebrities-img { | |
width: 4.5rem; | |
height: 4.5rem; | |
} | |
} | |
@media only screen and (max-width: 460px) { | |
.celebrities-img { | |
border: 3.5px solid var(--color-black); | |
} | |
.celebrities-img:hover { | |
border: 3.5px solid var(--color-grey-light); | |
} | |
.celebrities-img { | |
width: 4rem; | |
height: 4rem; | |
} | |
} | |
@media only screen and (max-width: 420px) { | |
.celebrities-img { | |
width: 3.6rem; | |
height: 3.6rem; | |
} | |
} | |
@media only screen and (max-width: 380px) { | |
.celebrities-img { | |
width: 3.4rem; | |
height: 3.4rem; | |
} | |
} |
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
import React from 'react'; | |
import img1 from '../../img/users/user-1.jpeg'; | |
import img2 from '../../img/users/user-2.jpeg'; | |
import img3 from '../../img/users/user-3.jpeg'; | |
import img4 from '../../img/users/user-4.jpg'; | |
import img5 from '../../img/users/user-5.jpg'; | |
import './Celebrities.css'; | |
import Dialog from '../Dialog/dialog'; | |
export default class Celebrities extends React.Component { | |
constructor() { | |
super(); | |
this.state = { | |
dialogData: {}, | |
celebrities: [ | |
{ | |
id: 1, | |
name: 'احمد', | |
img: `${img1}`, | |
fullName: 'احمد محمد احمد محمد', | |
info: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto voluptatibus ipsa saepe hic rem quis quidem molestiae suscipit tempore. ', | |
votes: 10, | |
}, | |
{ | |
id: 2, | |
name: 'سارة', | |
img: `${img2}`, | |
fullName: ' سارة محمد احمد محمد', | |
info: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto voluptatibus ipsa saepe hic rem quis quidem molestiae suscipit tempore.', | |
votes: 30, | |
}, | |
{ | |
id: 3, | |
name: 'محمد', | |
img: `${img3}`, | |
fullName: 'محمد احمداحمد محمد', | |
info: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto voluptatibus ipsa saepe hic rem quis quidem molestiae suscipit tempore.', | |
votes: 20, | |
}, | |
{ | |
id: 4, | |
name: 'اسراء', | |
img: `${img4}`, | |
fullName: 'اسراء محمداحمد محمد', | |
info: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto voluptatibus ipsa saepe hic rem quis quidem molestiae suscipit tempore. ', | |
votes: 60, | |
}, | |
{ | |
id: 5, | |
name: 'حسن', | |
img: `${img5}`, | |
fullName: 'حسن محمداحمد محمد', | |
info: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto voluptatibus ipsa saepe hic rem quis quidem molestiae suscipit tempore. ', | |
votes: 80, | |
}, | |
], | |
}; | |
} | |
// // Fetching data from the API | |
// componentDidMount() { | |
// fetch('https://jsonplaceholder.typicode.com/users') | |
// .then((reponse) => { | |
// if (!reponse.ok) | |
// throw new Error(`HTTP error! status: ${reponse.status}`); | |
// return reponse.json(); | |
// }) | |
// .then((users) => this.setState({ celebrities: users })) | |
// .catch((error) => alert(`${error} Reload the page 💥💥`)); | |
// } | |
render() { | |
// handleChange: function (e) { | |
// // 1. Make a shallow copy of the items | |
// let items = [...this.state.items]; | |
// // 2. Make a shallow copy of the item you want to mutate | |
// let item = {...items[1]}; | |
// // 3. Replace the property you're intested in | |
// item.name = 'newName'; | |
// // 4. Put it back into our array. Notice we *are* mutating the array here, but that's why we made a copy first | |
// items[1] = item; | |
// // 5. Set the state to our new copy | |
// this.setState({items}); | |
// }, | |
const onButtonClicked = (id) => { | |
// 1. Make a shallow copy of the items | |
let newArray = [...this.state.celebrities]; | |
// 2. Make a shallow copy of the item you want to mutate | |
let targetedElement = { | |
...newArray.find((celebrity) => celebrity.id === id), | |
}; | |
let targetedElementData = { ...targetedElement }; | |
// 3. Replace the property you're intersted in | |
targetedElementData.votes = targetedElementData.votes + 1; | |
// 4. Put it back into our array. Notice we *are* mutating the array here, but that's why we made a copy first | |
newArray[--id] = targetedElementData; | |
console.log(newArray); | |
// 5. Set the state to our new copy | |
// this.setState({ newArray }); | |
}; | |
return ( | |
<> | |
<div className="celebrities-component"> | |
<div className=" celebrities-container"> | |
{this.state.celebrities.map((celebrity) => ( | |
<div className="container" key={celebrity.id}> | |
<span | |
onClick={(e) => { | |
this.setState({ isOpen: true, dialogData: celebrity }); | |
}} | |
> | |
<div className="block-container"> | |
<img | |
className="celebrities-img" | |
src={celebrity.img} | |
alt={celebrity.id} | |
/> | |
<p className="celebrities-paragraph">{celebrity.name}</p> | |
</div> | |
</span> | |
</div> | |
))} | |
</div> | |
<Dialog | |
isOpen={this.state.isOpen} | |
onClose={(e) => this.setState({ isOpen: false })} | |
> | |
<div className="dialog-container"> | |
<h6 className="dialog-paragraph"> | |
{this.state.dialogData.fullName} | |
</h6> | |
<img | |
className="celebrities-image" | |
src={this.state.dialogData.img} | |
alt={this.state.dialogData.id} | |
/> | |
<p className="dialog-text">{this.state.dialogData.info}</p> | |
<button | |
onClick={() => onButtonClicked(this.state.dialogData.id)} | |
style={{ fontWeight: 700 }} | |
className="voting-btn" | |
> | |
تصويت | |
</button> | |
<p>{this.state.dialogData.votes} عدد الاصوات</p> | |
</div> | |
</Dialog> | |
</div> | |
</> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment