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