00:00
(upbeat music)
00:02
So now if you recall back to the last lesson,
00:07
whenever we were inspecting the state of our component,
00:09
we saw that dollar sign slots object on there,
00:13
and it already had a couple of properties.
00:14
Let's go ahead and take a look at that once more.
00:16
So if we add our inspect back in, give this a save,
00:18
dive back into our browser,
00:20
and let's scroll all the way down
00:21
because that's where it was.
00:22
There we go.
00:23
Each one of the three movie card components
00:24
that we're using has this slots object on it.
00:27
Each look the exact same so far.
00:30
We have a context, which is an empty object,
00:32
and we have a main that's showing as a function.
00:34
If we scroll right a little bit here,
00:36
we'll see that's where it ends.
00:37
It's just a function.
00:38
Let's hide our browser back away now,
00:40
and let's get rid of our inspect once more.
00:41
Okay, let's dive back to our homepage,
00:43
and we've ignored it up till now,
00:44
but we are providing an exclamation point
00:46
before we're providing the actual name
00:48
of the component that we wanna use.
00:50
This was also there whenever we weren't using
00:52
the tag directly as well.
00:53
So whenever we were doing component,
00:55
we had the exclamation point there as well.
00:56
This exclamation point's actually specifying
00:58
that the component is self-closing,
01:01
meaning that it doesn't need an end tag.
01:03
So let's go back to just our tag usage here and remove this.
01:06
Let's give it a save, and we'll see exactly what we get.
01:09
So let's open our browser back up,
01:10
and sure enough, we get unclosed tag,
01:12
and it's specifically saying it's each,
01:14
but that's just because our movie tag
01:16
is eating the end here.
01:17
So Edge is reading this as movie card,
01:19
and then it's using this end down here for our movie card
01:22
rather than the each, which width it's supposed to be used.
01:25
So we need to dive back into our text editor,
01:27
and if we're not going to provide a self-closing indicator,
01:29
which is that exclamation point,
01:31
we need to end our component.
01:32
So we can save this, dive back into our browser,
01:35
give it a refresh, and everything works A-okay once more.
01:38
Cool, so let's hide that again.
01:39
And everything in between the start tag and the end tag
01:43
is our main slot that we saw whenever we inspected
01:46
our component state.
01:47
We saw that dollar sign slots,
01:49
and we saw that it had a main property inside of there
01:52
that was a function.
01:53
Now, we don't have any direct information
01:55
that we need to provide in as a slot to this card.
01:58
So let's go ahead and leave this as it was,
02:00
and instead, let's create a separate component.
02:03
So let's give this a save,
02:04
and let's dive into our card and copy our button
02:06
and split that into its own component.
02:08
So within our components directory,
02:10
let's right-click it, new file, and we'll do button,
02:12
and let's call this one index.edge.
02:15
So now within our components,
02:16
we have a button folder with an index.edge inside of it.
02:19
We'll go ahead and paste the button
02:20
that we had copied directly into here.
02:22
And where we have view movie would be a great spot
02:25
to have slot content,
02:27
because if we place a slot placeholder right here,
02:30
it allows us outside of this particular component
02:32
to specify any content that we want.
02:35
We can provide a slot placeholder
02:36
by doing three curly braces
02:38
so that we can apply raw HTML within here.
02:40
We'll want to await because slots are asynchronous,
02:43
call dollar sign slots,
02:45
and then we'll actually want to call the main function
02:47
that we saw whenever we inspected the state of our component.
02:49
Now, instead of building out a route for a movie show,
02:52
let's allow just a dynamic prop for an href within here.
02:55
We can give this a save, jump back into our homepage,
02:58
and if you remember back,
02:59
if we take a look at our routes here,
03:00
we had created these two routes
03:01
for flushing our Redis database
03:03
and clearing out a particular slug from our Redis database.
03:05
Let's add these buttons for those two particular endpoints.
03:08
So let's go back into our homepage,
03:10
and outside of everything else in our HTML,
03:12
let's do an extra div, class, we'll say fixed,
03:15
bottom zero, right, maybe three.
03:17
Let's also make these flex
03:18
and apply a gap of three within there as well.
03:20
Okay, so let's add one button.
03:22
So we can do @button.
03:23
Now, since the name of our button file is index.edge,
03:26
we actually don't need to specify index here.
03:28
We could, but we don't need to.
03:29
We could just leave it a button
03:31
and the index will be implied.
03:32
The same as if you were working
03:33
with just traditional HTML directory files.
03:35
Okay, so for our props, we'll specify our href.
03:38
For right now, we'll just do a pound,
03:39
and then we'll have our end button.
03:41
Anything in between the start and end tag for our component
03:45
is our main slot,
03:46
meaning that we can directly apply
03:47
whatever content we want to our button
03:49
right here for our main slot.
03:51
So let's add the text flush-redis-db here.
03:54
Let's go and give this a save
03:56
and jump back into our browser and see what it looks like.
03:57
So down in the bottom right-hand corner,
03:59
we have our flush-redis-db button.
04:01
Currently it doesn't do anything,
04:02
but we can see that our slot content
04:03
is being directly applied to the button itself
04:05
as the content.
04:07
Now, it would be really nice if the bottom left
04:08
and bottom right-hand corners were not rounded.
04:10
So let's dive back into our component there
04:13
and let's take care of that.
04:14
So let's dive back into our index button.
04:16
Let's move our class out into a variable.
04:18
So we'll cut all of this
04:19
and we'll do @let className equals
04:21
and paste it in a string.
04:23
And let's make use of our props HTML.
04:25
So we'll do two curly braces.
04:27
So $props to @ttrs,
04:30
and then we're going to want to merge,
04:32
provide an object, a class, array of our class name.
04:35
Now this props to @ttrs will actually apply
04:38
our href automatically for us.
04:40
So we can actually get rid of that altogether as well.
04:42
One last thing,
04:43
sometimes we want a button to just be a type of a button.
04:46
So we can also wrap this in an if.
04:48
So if props.has href,
04:51
then we'll want to use an anchor.
04:52
Otherwise, let's give this an indent.
04:53
We'll do an actual button
04:55
and then we'll do our props.merge class,
04:58
className into @ttrs, just like so.
05:01
And then our three curly braces,
05:03
but wait, slots.main.
05:05
Lastly, let's end our if, just like so.
05:07
Okay, cool.
05:08
So now if we provide an href into this component,
05:10
it'll be rendered out as an anchor tag.
05:13
Otherwise, it'll be rendered out as a button.
05:15
You will notice that the HTML tag
05:17
is the only thing that's changed with these two.
05:19
So if you really wanted to,
05:21
you could inject the tag itself as well.
05:23
So we could switch this variable here to a ternary
05:26
@let nodeName equals.
05:28
If the props.has an href value,
05:31
we'll want to use an anchor.
05:32
Otherwise, we'll use a button.
05:34
And now we can get rid of our if
05:35
and get rid of our else,
05:36
take this back down,
05:38
and we can use double curly braces
05:39
to just directly render in the node name for the element.
05:42
So nodeName, just like so.
05:44
NodeName, give that a save.
05:46
If we dive back into our browser,
05:48
our button down here still looks a-okay.
05:50
Give it a right click and let's inspect it.
05:52
And look at that, it's an anchor.
05:53
If we bring our text editor back up,
05:55
go back into our homepage,
05:56
and let's go ahead and just get rid of the href.
05:58
Give that a save.
05:59
Let's take a look at our fixed element.
06:00
And look at that, now it's a button.
06:02
So that seems to be working a-okay as well.
06:04
Got a little sidetracked.
06:05
We were trying to take care of the border radius
06:07
there on the bottom.
06:07
So let's do that real quick as well.
06:09
Let's put our href back in.
06:10
Now we can specify a class on the outside of here.
06:12
We'll do rounded, bottom, none.
06:15
And that should remove the border radius from the bottom.
06:17
And sure enough, it did.
06:18
Awesome. That's looking great.
06:20
So now we have a button component that we can use anywhere.
06:22
And that allows us to simplify our cards
06:25
by not redefining the HTML for that button.
06:28
So let's go ahead and hide our browser back away.
06:29
Let's dive into our movie card component.
06:31
And now we can get rid of this button
06:33
and instead use our button component.
06:35
Provide the href.
06:36
Go ahead and just copy this here.
06:37
Cut that out.
06:38
Paste it right into there.
06:39
All of our styling should be the same.
06:41
I don't think we did anything special with that.
06:42
So we can get rid of the element
06:43
and replace the end with our button end.
06:46
If we give this a save,
06:47
we can dive back into our browser.
06:48
And look at that.
06:49
Everything looks the exact same as before.
06:51
We can click them and dive right into our pages
06:54
for our movies.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!