Awesome.
So now let's complete our job in full and as a result will be done with our job component and essentially,
like I said.
I just looked at it that I have three repeating things, meaning I want to pass in the icon on a text,
even though, yes, we can hard code that in the job.
And more specifically in the content center, I thought, you know, it kind of makes sense if we set
up a separate component van and we just set up a little bit of logic.
Meaning there's going to be, she says, coming in and all that.
And then we're just passing the icon as well as the text as a problem.
So let's navigate right now to the job info.
And the first thing that we want to do is import these excess.
So let's go here.
So import, we're looking for a wrapper that is coming from the assets.
More specifically, wrappers.
And then I'm looking for the German phone.
And then as far as the return on, let you go here with the wrapper.
And like I said, there's going to be two things coming in as props, icon and text and then inside
of the wrapper.
Here's what I'm going to do when I go with span, I'll add a little bit of styling.
I'll say here icon and then wonder why I wanted to play here.
Well, the icon that is coming as a prop and we want to copy and paste and just change these powers
around.
So this is going to be text as well as this one.
So let's save this one.
And then back in the job one.
We are importing already job info, correct?
Where we have all the icons.
So let's just get to the content center later.
Effectively, where I have the comment and I'll set up that content center.
So let me remove the comment and then I'm going to go with div the class of content and center.
And then in here, let's go with our job info.
We're looking for two things icon.
And in this case, since we're passing in the component, we're going to go with the curlies and then
we want to go with component.
And the first one is going to be location one.
So location arrow, then let's close the component.
And then as far as the text, well will pass in the job location.
So that's the prompt that we're getting from the job item.
Then let's close the component, and now we're just want to set up two more.
Of course, we'll have to change the value and we will do that in a second.
And lastly, there's also going to be a status.
So if you take a look at the complete application notice, the status one and notice also how the classes
are different, meaning the styling.
So, for example, for the interview, we have one color for depending on we have another one.
And then if I say decline, then is going to be totally different color.
So let me quickly edit that when to go here to interview and instead of interview, I'm going to go
with declined.
We want to submit this one.
Our short here job, I'm.
And then once I navigate back to all the jobs, this is going to be declined.
And the way we'll do that, we'll just add class using the status value, and I'll showcase that in
a second.
So don't worry, we'll fix these values in a second.
I just want to be done with the entire setup.
And then we can always update the icons as well as what text we're passing in.
So let's first go with a div and not as far as the classes.
This is going to be dynamic and therefore I'm going to go with my college.
And first, let's set up the template string, let's say, status.
So that's the main class, which basically is going to set up the entire styling and then we're going
to go with our interpolation.
And here, let's pass in the status.
So that's the problem, nor I'll showcase that in a second.
And then inside of the div will actually want to display, well, what is the status?
So let's save it over here and I'll change the icons as well as the text, and then I'll showcase how
the system works.
So first one is going to be the FAA location arrow, then the next one is the calendar one.
So let me remove this one and we're looking for calendar.
And as far as the tax matter that is going to be equal to a debate, basically our debt problem.
And then the last one over here is going to be a briefcase.
As always, you can set up whichever icon you want.
So those are the ones that I went with.
My next will be equal to the job type.
Let's save it and before I showcase how everything looks in a browser.
Let me just navigate to the wrappers and then more specifically, job and you'll see how the styling
works here for two status one.
So with regard to assets, wrappers and a job.
So that's my style, a component.
And then if we keep on rowing, eventually we'll see the status.
So that is the main class.
And if we want to have a specific class, for example, whether the job is pending interview or decline
notice because basically I just change the background color as well as the color, and that since I'm
adding that class after the status one.
That's why, depending on that particular status, I also have different styling.
So once I navigate back to the bigger browser window, this is what we should see now.
As far as the job status, it looks like all of them are pending.
So let's just change that went around.
We're going to go with add job and let's go here again with intern, I guess.
And as far as the company, I'm going to go with phrasebook this time.
And then when it comes to business instead of depending on let's go with interior and let's submit and
we can do the same thing right now with the client as well, just so we can double test everything.
And as far as the position, again, I'll just say testing, I'll probably remove those values anywhere
a mind when it comes to company and go with Twitter.
Let's submit.
And if I go to all jobs, not ours, not our own, we have the pending one.
But I also have the interview as well as the decline.
So this concludes the job component, and now we can start working on the edit and delete job functionality.