In the last section we spoke about the little change that we're going to make to our application.
So we're going to have to create a brand new component.
Let's first create a new file inside of our project directory to house this new component and it will
start thinking about how to put it together.
All right.
So going to flip back over to my code editor and I'm going to create a new folder in a new file inside
of my SIRC directory and I'm going to give this thing the name approval card.
J.S. Lexow that inside of your were once put together some boiler in this file that's going to become
very very familiar over time at the top.
We will import re-act from re-act and we will create our component approval card.
This will be a functional component.
And then at the bottom we're going to immediately put down that export default statement so that we
can make use of this component in other locations inside of our project.
All right so now we need to start thinking about the GSX that we're going to right inside of this approval
card component.
We're going to again borrow some styling from that semantic UI library.
So I'm going to call it the semantic documentation and it look at some styling that we can borrow so
that we don't have to worry about doing a bunch of CSSA ourselves.
All right.
So Mathie semantic Dasch UI dot com on page all through that my editor just you can see it very easily.
Really quick.
There it is right there.
And on the left hand side you can scroll on down and under the View section find card.
So I'm looking at the card section right here.
I'm going to scroll down just a little bit.
Little bit more.
Here we go.
You can see one section here marked as Kurts and it has a UI right here very similar to what we are
trying to make some content on the top with this nice outline around the edge and then approve an declined
button inside of it.
So this is what we want to build.
This is it right here.
We can get a better idea of how to build this thing by clicking on this little code icon right here
and it will show us some M L that is used to produce that element.
And so you'll see that we've got a div with the class card.
We've got some other different side of it and blah blah some other stuff.
So it's basically the recipe of how we're going to create the card itself.
But it doesn't really answer how we're going to get some custom content inside of here.
Let's first just make the card with the buttons underneath it or on the bottom edge of it and then we'll
start to worry about how we're going to sub in some custom content right there.
All right.
So I flip back over and then inside of my approval card component I'm going to put down a return statement.
We're definitely going to have a lot of GSX sexier so I'm going to immediately place down a set of parentheses.
And then inside there we'll put down a couple of different elements.
I'll do a div with the class name.
You buy a card and close off that div.
I'll do a deal with the class name of content.
Oh close off that div.
This right here at this div that we just put together.
That's where our ultimate content is going to go.
So that's where the punnet detail component might end up at or some other custom content that we want
to throw in there like some simple text like.
Are you sure you want to continue.
So just to kind of make sure that things are working out the way we expect.
Let's put some hard coded text inside of your right now will say Are you sure it's something like that
just to can get this working.
After that I'll do another div with a class name of extra content and I'll close off that div.
And then inside there will do another day with the class name of UI two buttons.
Those are that one.
And then we're going to put our two buttons in here.
I'll say div with the class name of UI.
Basic green button I'll give that the text approve
and then underneath it I'll do another one with you my basic red button.
Like so close off that div No I'll give it the text reject.
All right now I notice that I've got a little discoloration right there which means I made a typo when
I was putting this GSX together and it looks like I left off a closing bracket right there so I can
make sure I get that in there.
At this point I would encourage you to do a quick double check as well.
Make sure you don't have any obvious typos inside that block of GSX.
We just put together.
All right.
So now that we've got this component put together with some default content in here right now.
Let's save this file and that will flip back over to the index start Jasc File.
We're going to import the approval card and just show a single instance of it inside of the app component.
Then we'll just make sure that this thing is showing up inside of our application and then we'll start
to worry about getting some more custom content inside this div right here such as our actual comment
detail component.
So I'm going to flip back over to my index dodgiest file and then at the top I'll add another import
statement or approval card and I'm going to import this from dot slash meaning current directory approval
card like so
then inside of my app component right underneath that existing div that we have.
I'll just stick the approval card right in here so I'll say approval card like so.
All right.
I'll then save the file and we'll flip back over to the browser and see how this looks.
All right there we go.
Lebanon looks pretty good right now if I zoom all the way back out to the standard 100 percent it looks
like a very typical card to see No.
I usually run with my browsers zoomed in quite a bit so that you can see very easily what's showing
up on my screen.
So what we have here looks pretty good.
Let's take a quick pause.
When we come back the next section we're going to start to think about how we're going to somehow get
our comment detail inside of here so quick pause and I'll see you in just a minute.