Feature/meet the host #45
There are no files selected for viewing
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
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
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
| 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); | ||
| } |
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
| 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. 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. of course. I will do that. Also, as you mentioned in the next comment, this is a screenshot of my work: |
||
| <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. 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. 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. 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. 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; | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.