OK, so now we'll create the card, which will be containing all of the details of that particular cocktail,
like the image and some description and a detailed button which will take us to the like particular
page of that cocktail.
Before that, we need to create a file inside the components.
So here we'll create a file that can go to the components here and create.
Cool for.
Don't you?
And inside this, we'll go to the boilerplate code with a creek of the extension or this an RF key.
And here is the boilerplate code.
And now the first thing which we'll do is we'll import some things.
First of all, will import the link from the reactor out, Adam, but we'll import.
Link.
From.
Of course, we're or talk.
The act, I don't.
OK.
Next, we'll provide some basic structure to the components that will lead this, Dave, and will provide
an article back.
So are the calls.
And, yeah, insert this article, that would be our.
And that they would be retaining that image.
So inside there, they will give an image tag.
And these sorts for the image will be dynamic and will be getting it from the end point.
So right now will not pass anything to it and we'll move further after this, Dave.
What we'll have is another day for Deep Water Park, so we'll give what Dave and inside this there will
be and each tree.
And that will be having the name and we'll have each for.
And that will be having the glass.
Next, we'll have a paragraph back or the piece that we should be having the descriptions, so here
have been discharged in full.
The now what we'll do is we'll create a link and that would be a button inside, which will be taking
us to the details page two.
Before that, let us pass some of the props here, which will be responsible for the dynamic behavior
of our application.
So here we'll pass some objects.
Basically, one object, so there will be things inside like image, name, I.D. info, and we'll have
a glass good.
So that is what we had to do now, and we can now provide some dynamic behavior to our application.
And inside the link, there would be a button.
We'll have a link, a link bag and this link will be taking us to where so this will be to.
Two and inside the back picks, that would be the pot inside the back picks flash.
Bill Glass dollar sign and inside the closest that would be the IED, basically, that there is a particular
IED for the post and that is the IED, which we are passing.
So that is the IED, and now we'll provide some of the blast names for this and that would be outside
the code libraries.
OK.
And.
Remember, we had put this inside, so that will be a relief and there will be a class name, class
name.
Which would be equal to.
And that would be Bolton Beatty and.
Primary.
And this will be details.
This all is tapping just for the sake of this CSIS and will write details here.
Yeah.
Not that bad, just the text.
And next, we'll give some classes to these elements also for the article.
I'll give a last name.
That would be cool to feed.
And inside the image, that would be some dynamic part.
And that's that would be image.
And for the old will be having the name.
And that would be the neat.
And inside this cave.
So what will give a class names that class names people?
Would it be?
IMG and.
Container.
Next, we'll have some other class rock.
That was the basic structure of the application, but we have given some styling now.
So the first thing which we'll do is we'll start off our server right now, sideways, not running so.
And we'll go to the project folder project and inside this that is a directory that is named as cocktail
hour.
So we'll go to this particular directory and we'll type and be start.
And this will take few seconds to start off the server and then we can do some more styling.
And we haven't made this thing dynamic yet, so we'll make this because this is a static venue.
So always remember dynamic things come under calibrate inside the curly braces because that is the part
of the JavaScript to name is a dynamic value.
Basically, if you can just grab this value inside the with no need to write it from scratch, OK?
You can just grab that this in full.
And the details is just the tax which would be shown inside the button.
So there's no problem with that, I guess.
And they're to save it.
I guess that's the only thing which we need to do inside this particular component.
The server is up and running by this thing right here is of no use because we have not yet rendered
it on the browser or on the road component, so we'll create another component that will be responsible
for all of the values.
This is just one guard, you know, and there will be multiple cards that will be like number of cards.
So that should be a component which is responsible for rendering those cards with the computer and do
the cocktail list --.
So that will also be inside the components.
And its name would be.
They'll list gorgeous.
OK.
We'll import a boilerplate code.
And here, William called cockpit a way we foster.
Important, but not important.
They'll throw them and then the location.
Yeah.
Cool.
Right now, we have not yet set up the loading state or the component for the loading that will do.
But next, we'll import global and global context.
OK, so the U.S.
Don?
From this.
So what we need to do next.
Is create content inside.
The name his name would be doctor list.
And list and we'll export back.
Yeah.
Next, had the constant go.
And that would be feels.
Loading.
Based.
Then we'll, first of all, let us go and create the loading component.
OK.
Okay.
I'm extremely sorry, guys, for my voice.
I'm having extremely bad performance, that's why my voice is so messed up.
So the loading component will be inside the components.
OK.
Gorgeous.
And here, of course, boilerplate.
Returning what?
Just today with the glass of floating.
Not.
That's it for this.
Let me disclose this because we don't need it any more.
OK.
Okay.
Inside the shopping list.
We'll import that.
Loading from.
Loading, Yeah.
And next, we'll create some logic here that will be if if.
Loading.
Like, if the loading is what we need to render, we need to render the loading component so simple,
isn't it?
OK.
So then we'll have an a but if statement that is if.
Dart learned.
Is.
Less than one.
Now, what does this mean?
Length is less than one that means simply, we have not received any data.
But we write written.
But it Don needs to.
The class name of the action.
Title.
Yeah.
And we'll right here, oops, no match found.
No, I just found.
OK, so next, we'll be having another written and inside this, that will be the main body.
We'll be here, we'll write section.
Thank in the class name of.
Action.
And now we'll have an edge to the class of section titled section title.
And inside this win, right?
Thanks.
And next.
We'll be having our Dave.
OK, the last name of business and.
Not thought there should be an hyphen.
Cool inside this, there will be some dynamic chords, of course, we'll go with typically releases,
and here we'll vote.
We'll map the data and that would be Coppins Dart map.
And certainly that will be the item.
And here we'll return.
Britain walked.
Got been.
This one, and that would be a key because every element will have a different key so that the item
not simply here will restructure the item object or dari, what I what it is the disparate opener,
but.
OK.
Yeah.
And I guess this is it.
Yeah, this is it.
You can see it.
That are not in the home page.
And how to we, right?
Why it's not giving me an option.
We'll save it, and now we can go to the browser and check if that is something.
There is a new order.