Okay, let's do one more refactor, and that is to move some of our duplicate code to Blade Components. So right now, these small game cards are repeated in this component, and this component, and this game card is repeated here. And if you go into another one, you'll see it here as well. So let's go ahead and move this into Blade Components. So let's start with this one here. So let's say, php artisan make:component GameCard, and let's make the other one as well, and let's call it GameCardSmall, okay? And let's go into our PopularGames, and let's look for the section that's a game.

other one as well, and let's call it GameCardSmall, okay? And let's go into our PopularGames, and let's look for the section that's a game. So it would be this, and let's cut this. And this is a game card, so let's say XGameCard, and we're going to pass in the game. So we can do game equals $game, and we can close it like this. And let me do this for the similar games as well. So that should be in show.blade.php. So I believe this is it here, and it is. You see similar games here, so let's go ahead and do the same thing here, and I'll paste in the game card, and let's paste in that view or the markup in our new component, and

You see similar games here, so let's go ahead and do the same thing here, and I'll paste in the GameCard component, and let's paste that in, okay? And let's re-invent that, and we also have to pass in the game, so there should be a class here. If you go into View, Components, there's the GameCard, and we just want to make a public property here for game, so say __construct, okay? Let's say Game, and let's make it public, okay? And that should pass in the game because it's public to the view or to the component. And if I did everything correctly, this should still work, okay?

This still works. Cool. And let's do the same for the gameCardSmall or the gameCardSmall. So this would be in MostAnticipated, so this is the card, so let's replace this with X gameCardSmall. Let's pass in the game. game equals game, okay? Let's close that. Let's copy this, and let's put it in the ComingSoon component as well. And that would be this, so let's do that.

Let's copy this, and let's put it in the ComingSoon component as well. And that would be this, so let's do that. And let's go to GameCardSmall, let's paste that in. Okay, let's re-invent. Let's go to GameCardSmall, and let's pass in the game. So again, constructor property, and say game, let's make this public, and that should be passed through to the component, and everything should still work. Awesome. I guess we can put the SkeletonLoader into a component as well. If you remember, a few videos ago, we made this Skeleton component, so we have it repeated.

I guess we can put the skeleton loader into a component as well. If you remember, a few videos ago, we made this skeleton component, so we have it repeated in these two, so we can put that into a component as well. So it would be this. So let me just cut this, and we don't need a full component here. We can make use of anonymous components, which is just one file because we don't have to pass any parameters to it, so we can call it game-card-small-skeleton, okay? Let's close that. And if you just make a Blade file, that should work if we named it correctly, so game-card-small-skeleton.blade.php, let's paste that in, let's re-invent.

And if you just make a blade file, that should work if we named it correctly, so game-card-small-skeleton.blade.php, let's paste that in, let's re-invent. Save that, save that, and see if this still works, and it does. And we just have to do it for the other one as well. So that would be for coming soon, so let's go to that. So it would be this, and we just need to replace this. And that should still work. And it does. Cool. So a quick refactor to move some of our repeated code into blade components.

Cool. So a quick refactor to move some of our repeated code into Blade components.