All right.
Next up, we have the user component and the user component.
We have two components.
One for the user.
So this is going to be our card component.
And also, we have a list of followers.
And, of course, we're going to start with our user card.
Now, at the moment, our application is somewhat busy because we have all these having tiers.
So also what I would want is in a dashboard come onto the nav bar, the search, as well as the repos.
And as we start working on them, of course, will come at the mouth and set up the functionality.
Now, if you're wondering how to comment out stuff, if you are using different operating system, because
I'm using Macs or in my case, it is command and then forward slash in order to comment that out, just
navigate to edit and then look for toggle like comment.
Like I said, I'm using Mac.
So for me it is command and forward slash.
If you're using windows, of course you can see your own option.
So we have right now our info and now we want to work on a year or so.
Of course, we navigate bravely to a user.
And like I said, user component will consist of two components.
The card component and the followers component.
So first, let's set up the user, but effectively will work first in the car component and then followers
combine because as far as the functionality and user, there is not much there.
Now, first, I would want to change changes through a section.
Again, the global section, glacier line inside of it.
We will place a rapper or a rapper here.
That is, of course, our styled component.
Again, we're going to add the global class, a class name, and we're looking for section, center
section and then center.
And then inside this rapper, we have two things.
We have the card component.
Copy and paste.
We're looking for follower's component.
What's her name?
And now, of course, we just have card component and follower's component.
And what's interesting that these two.
I'm not exporting globally.
Again, as a side note.
Notice the user, the one that we're displaying, of course.
We're exporting from the index chart.
But since card and followers on just local files, essentially, we're just using them instead of the
user.
I don't have to export them globally.
I can just keep them in the components and then only the user one.
The one that I'm going to use in different pages.
That's the one that I'm exporting.
That's just a side note.
And then in the card, what I would want is, of course, to use my global context again, because similarly,
like in the info, I would want to start by pulling out some properties from the Gorev user.
Now, what I would want.
Well, let's check.
So you have the name, of course.
We have the Twitter and oh, we have the info on all of that.
So I'm going to navigate to my card.
I'm not going to work on my return yet, but I'm going to grab my get up user again.
So I'm going to go to concert and then we're looking for GitHub user.
That is the property, of course, in my giant object that I'm sharing all throughout my application.
We're using use contacts.
And of course, I already imported the get up context.
Here we go here with a get up context.
And now, again, we need to structure those other properties first.
Well, the structure, the properties then, of course, will set up the functionality.
Now, again, if you're wondering where those properties are, either use the euro that I provided in
the read me and the euro would be API, get up users and then whatever is the user name you're looking
for.
Or in the mock data.
Of course, those properties are going to be there because we're just pulling out of that object again
in a card.
I'm going to structure more from giddap user.
So we're going to go to concert and land that is equal to my GitHub user.
And the properties that I'm looking for are Avatar your whole avatar.
You are also this is going to be our image.
Then we have the email Yoro.
So this is where we can navigate to get them to.
For example, check out the repoll.
You are out.
Then we have the name, of course.
This is the user name.
And we have company that the user works for.
If it is provided, of course.
And we'll cover that in a second.
What we do if it's not provided.
So in here we have also a blog option bio, then location where the user is located.
And then last one is Twitter.
And their score user name.
And of course, all of this is coming right now from my get up user.
So once I have these options, then, of course, I would want to go with my wrapper again for my styling
purposes.
Start component and inside of the wrapper, I'm going to go with a had her and line inside of her.
Let's start by setting up our image.
So we're gonna go with image.
And this is the case where we're of course, looking for the avatar, YORO.
So that's the property that holds the path to an image.
So would you say Avatar and then you órale as far as the name for the alternative?
Well, we can just use the property that we're destruction.
Correct.
That is going to be, of course, the name of the user.
So once we sell it, we have our card.
And then in here we have the image.
Now, if you would want to change this little tab here on top.
Just keep on scrolling.
And then in the Veerappan component, look for the before.
Because as far as the content.
This is where you're changing.
For example, I could just change it to some random value.
Of course, it's gonna be displayed some random value.
Now, let me delete.
And I'm going to send this back to user again.
This is just in case you're wondering how to change this to some kind of different text.
And right after the image, I would want to set up my div.
So we're gonna go div and then inside of the div, we're gonna have a name for the user as well as Twitter
user name.
So let me go with adding four.
And then here we have the name.
So let's save it.
And of course, this is going to be our GetUp!
User name.
Then I also want to display the Twitter user name.
So we're gonna go here with ADD and then the Twitter user name.
Now, I can tell you right away that there's going to be a gotcha.
So Twitter user name and then we're looking at it and we can see only that.
So why is this happening?
Well, because a lot of these options are optional.
I mean, if you don't want to provide username, you're not providing username.
So on this point, of course, we would need to set up some kind of default.
So I'm just gonna show you with Twitter user name, just keep in mind that for the rest of the things
you'd want, you can set it up in a following fashion where I have the Twitter user name.
But if the user hasn't provided if it is undefined, by the way, you can check that out again by either
navigating through RL or I'm just gonna show you in a mock one where if we're looking for Twitter,
Twitter, Twitter, where it is Twitter user name is equal to not correct.
That's why we don't display anything.
So we can use or or operator.
So in that card we would say, yeah, get Twitter user name.
But if the property is now, then of course I can just display some default value.
So in this case I'm going to say John Doe.
I'll say it again.
I know I mentioned this just a second ago, but you can do the same thing for other properties as well.
Now it gives you right away some kind of image.
I don't think you're going to have any issues with image grab automatically issues, at least something.
But then, for example, for BuYeo or for the company and all that, you can keep on adding this or
operator where essentially we say, yeah, get me this property or if this value is going to be false,
meaning it's going to be falsey, whether that is normal or undefined, then of course, just return
some default value.
Now, the one thing that I'm gonna do right now is quickly get back my own user name.
So I'm gonna go to John Smellier because I know for sure that all my properties are there since I'm
gonna be lazy on adding these default values.
And this is, again, just to showcase how you can get yours.
So search for your username.
Copy this one.
Then go back.
To the mock one where you mock data in this case, and of course, I'm looking for mock user.
So if you're getting your own rebozo, then look for mock replays.
And then if you're getting for your followers, just look 40 mock followers.
So in this case, it is moch user.
Now, it's not a giant file.
So I can just delete everything or, you know, I'm just gonna showcase how I will do that for Rebozo.
You can just remove everything, copy and paste.
So this is your object.
And of course, we also need to export.
So we're gonna go with export default and then now we're exporting this as a default object.
Well, just say it and we're gonna get the data.
So we sell it.
OK.
Now, when are fresh and I should get some different value, some reason I still have the worst boss.
Mm hmm.
Interesting.
What do I do wrong here, Mark?
User.
Let me say, I think I didn't copy that.
Sorry.
So let me copy that for sure.
Let's select everything.
Export.
Poor default.
That's my object and I'm copying face.
Yeah, that should be mindful.
Beautiful.
Now, what else we have in the card?
Well, right after our d'Hiv.
But still within the header.
I also want to set up a link where the user can navigate to see the profile, to get a profile.
Gonna go with a.
So that's my link.
And here I'm just gonna passing that HDMI all Yoro.
Essentially, if you check out Mark User, you'll see that the amale urologist leads to a repo that
he's referencing the user.
So let's do that.
We have them all your l we pass it.
And as a atrip, I'm just going to say here, follow.
Just in case the user would want to follow that particular get Abuzer.
And then, of course, we need a little bit more info.
So right after we had our we're gonna go with a bio here and we're going to add here a class name of
bio class name, bio.
And then we would want to render our bio property.
And then we just have some kind of lunch.
So what are we looking for here?
Well, let's see.
So we have a link that just displays the company that the user is working for the location.
Of course, if these things are provided as well as the blog bridge.
And just to make it a little bit better looking.
I just added some icons, of course, here at the top.
You can see which icons we're importing.
And then right off third bar graph, I'm going to go with some kind of dev.
And then within this Dev, first we're going to have some kind of class.
So that is going to be linked.
And then there's going to be a paragraph here on line inside that paragraph.
Let's place A and D business icon.
I'm right next to it.
We're going to have our company property.
So wherever it is, the value is going to be our company.
Now we can just copy and paste because we're going to do the same thing is just the values are going
to be different.
This is going to be the end location.
So I'm going to let my icon right now.
And we're going to go with a location on that.
The icon that I imported and of course, the value will be location.
If the user has provided not, of course, you can have your or.
And then say Earth, for example.
Right.
That would be a default value.
And the last one is gonna be a link to a personal site.
So, again, we go with a link element in this case.
We have the atrip.
The property that we're looking for is blog.
But we do need the HDTV.
Yes.
So we go here, HTP less than colon, then two forward slashes.
And now the property we're looking for is blog.
So I'm setting up my template string here.
And then inside of the link, I'm going to have my M.D..
And then link.
Icon link.
Link icon, and then all right, next, then the icon I'm going to have on my blog.
So I'm just gonna say, yeah, if you'd want to see the user's blog.
Definitely.
Just navigate.
So that should do it for our card.
And of course, we can start working on our followers as well.