-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/meet the host #45
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
.host-info-container { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: start; | ||
} | ||
.header { | ||
font-weight: 500; | ||
} | ||
.main-container { | ||
width: 382px; | ||
height: 230px; | ||
border-radius: 25px; | ||
box-shadow: 1px 1px 8px 2px lightgrey; | ||
cursor: pointer; | ||
display: flex; | ||
flex-direction: row; | ||
justify-content: center; | ||
box-sizing: border-box; | ||
} | ||
|
||
.leaf-side { | ||
width: 68%; | ||
height: 100%; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.round-photo-component { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
position: relative; | ||
} | ||
|
||
.raus-img { | ||
width: 100px; | ||
border-radius: 100%; | ||
opacity: 0.9; | ||
} | ||
.verified-container { | ||
display: flex; | ||
justify-content: center; | ||
border-radius: 100%; | ||
padding: 5px; | ||
background-color: rgb(206, 81, 106); | ||
position: absolute; | ||
margin-left: 70px; | ||
} | ||
.verifiedicon-svg { | ||
width: 20px; | ||
height: 20px; | ||
fill: white; | ||
} | ||
|
||
.raus-superhost-container { | ||
display: flex; | ||
gap: 0px; | ||
flex-direction: column; | ||
align-items: center; | ||
} | ||
.raus-info { | ||
font-size: 30px; | ||
font-weight: 700; | ||
line-height: 0%; | ||
} | ||
.superhost-container { | ||
margin-top: -8px; | ||
} | ||
.superhosticon-svg { | ||
width: 12px; | ||
height: 12px; | ||
} | ||
.superhost { | ||
font-size: 13px; | ||
font-weight: bold; | ||
} | ||
|
||
.right-side { | ||
width: 32%; | ||
display: flex; | ||
justify-content: end; | ||
align-items: center; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
} | ||
|
||
.reviews-container { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: start; | ||
|
||
width: 100%; | ||
} | ||
.reviews-numbrs { | ||
font-size: 20px; | ||
font-weight: bold; | ||
} | ||
.reviews-text { | ||
font-size: 11px; | ||
} | ||
.star-svg { | ||
width: 14px; | ||
height: 14px; | ||
} | ||
.borders { | ||
width: 100%; | ||
border-color: rgb(255, 254, 246); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
import React from "react"; | ||
import "./MeetTheHost.css"; | ||
|
||
const MeetTheHost = () => { | ||
return ( | ||
<div className="host-info-container"> | ||
<h2 className="header">Meet your Host</h2> | ||
<div className="main-container"> | ||
<div className="leaf-side"> | ||
<div className="round-photo-component"> | ||
<img | ||
className="raus-img" | ||
src="https://a0.muscache.com/im/pictures/user/d62627ea-ea22-4cf1-b38a-152f1f86a9ed.jpg" | ||
alt="RAUS" | ||
/> | ||
</div> | ||
<div className="verified-container"> | ||
<svg | ||
version="1.1" | ||
xmlns="http://www.w3.org/2000/svg" | ||
width="32" | ||
height="32" | ||
viewBox="0 0 32 32" | ||
role="img" | ||
aria-label="check mark" | ||
className="verifiedicon-svg" | ||
> | ||
<title>verified-sheild</title> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Probably not all hosts are verified. We could use a prop here too that will tell us if the host is verified and only if the prop is There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
<path d="M13.876 21.464l8.732-8.732-1.532-1.532-7.2 7.149-2.809-2.809-1.532 1.532 4.341 4.392zM16.071 4l9.804 4.392v6.536c0 6.026-4.187 11.694-9.804 13.072-5.617-1.379-9.804-7.047-9.804-13.072v-6.536l9.804-4.391z"></path> | ||
</svg> | ||
</div> | ||
<div className="raus-superhost-container"> | ||
<h2 className="raus-info">Raus</h2> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It seems to me that "Raus" is a name of a concrete host. We should avoid including such data into things like css class names because eventually this component will be used to display any user or host. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thank you so much for this comment. I always have a problem with naming CSS classes :) I will change the names. |
||
<div className="superhost-container"> | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
viewBox="0 0 16 16" | ||
aria-hidden="true" | ||
role="img" | ||
aria-label="person" | ||
focusable="false" | ||
className="superhosticon-svg" | ||
> | ||
<path d="m8.5 7.6 3.1-1.75 1.47-.82a.83.83 0 0 0 .43-.73V1.33a.83.83 0 0 0-.83-.83H3.33a.83.83 0 0 0-.83.83V4.3c0 .3.16.59.43.73l3 1.68 1.57.88c.35.2.65.2 1 0zm-.5.9a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z"></path> | ||
</svg> | ||
<span className="superhost">Superhost</span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div className="right-side"> | ||
<div className="reviews-container"> | ||
<span className="reviews-numbrs">74</span> | ||
<span className="reviews-text">Reviews</span> | ||
</div> | ||
<hr className="borders" /> | ||
<div className="reviews-container"> | ||
<div> | ||
<span className="reviews-numbrs">4.85</span> | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
width="24" | ||
height="24" | ||
viewBox="0 0 24 24" | ||
className="star-svg" | ||
role="img" | ||
aria-label="Star icon" | ||
> | ||
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z" /> | ||
</svg> | ||
</div> | ||
<span className="reviews-text">Rating</span> | ||
</div> | ||
<hr className="borders" /> | ||
<div className="reviews-container"> | ||
<span className="reviews-numbrs">1</span> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This seems like a something that could be passed via a prop https://react.dev/learn/passing-props-to-a-component There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thank you for the clarification. I assumed that in this step, we are supposed to implement the tickets as simply as possible. Therefore, I used values rather than props. I will store all the data for this component in an object within App.jsx (temporary) and pass it down to the component via props. Is that approach okay? |
||
<span className="reviews-text">Year hosting</span> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default MeetTheHost; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems like your feature branch contains changes from the previous ticket. It's not a big deal but it's a good practice to only include changes in your PR which are directly relevant to the ticket. This makes it easier for your teammates to review your code, otherwise they might get confused, or there is just more code that needs to be reviewed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When I tried to push my changes, I noticed that the previous conflicts from last night were still unresolved. So, I resolved the conflicts first and then pushed all the changes. I'll definitely keep this in mind for next time.