Now that we have fixed up a little issue or two, we're gonna start adding in some these new routes.
The first route we're going to work on is going to give the user the ability to create a ticket.
So it will be a very simple form where user will enter in a title and a price.
We're going to make this as a new route accessible at tickets, slash new and to implement that route.
Naturally, we have to create a file at ticket slash new J.S..
So let's create that new file.
Right now.
Back inside my editor, I'm going to find my pages directory inside there.
I'll make a new folder called Tickets.
And then inside there, I'll make a new file of new dot J.S..
Inside this new James file, I'm going to create a new component called New Ticket.
At the bottom, I will immediately export it.
And inside the compound itself right now, let's just throw in a div.
And I'll give it maybe an each one that says create a ticket.
Let's immediately save this.
Go back to Richard Browser and just make sure that we can access this new route, should be able to
access ticketing data dev flash tickets, slash new RNC, create a ticket, appear on the screen like
so reasonable.
Now, next up.
Well, let's start to add in the form itself for the form.
I'll go back over to my new ticket component.
We're going to add in a decent amount of J.S. here.
So I'll put in a foreign element.
I'm gonna give it a div that has a class name of form Dasch group.
Inside that div, I'll place a label.
That has tax title.
After that, I'll put in a simple input.
I'm not going to duplicate that entire div.
And I'll change the label over to a price.
Instead.
And then finally, after the second dip that we just copy paste it in, I'll place a button with the
class name of B10 ETN primary.
And I'll give us some text of submit.
Get pretty simple start.
Let's take a look at what that looks like.
Yep, there we go.
OK, now we've got that put together.
We need to make sure that we also add in to these inputs.
Just a quick class name just to fix up some of the styling on both the inputs.
I can add a class name of form control.
And form central.
If I now say that and put back over.
Well, Nancy, that stretches the entire length.
Now, having it stretched the entire length looks just a little bit weird.
We don't really have any gap on the left hand side or the right hand side to fix that up.
We're going to go back over to our app component.
We're just going to add in really quickly an additional little class that's going to give us a little
bit of spacing on either side.
So on the app component.
Going to find where we create the actual components right here.
So that's the child compound that we're trying to show to the user.
And I got to wrap it with a div.
That has a class name of container.
Now, I say that I'll see that I get that nice border on both sides of the screen and you probably see
something a little bit closer to that.
Just again, as a reminder, as usual, I run my screen really far zoomed in.
Just you can see everything I'm doing very easily.
OK.
That's a good start.
Let's take a pause right here we come back the next video.
We'll make sure that we add in some states to track the value so users entering and then make a request.
We eventually create a new ticket on our back end server.