When I'm working on an application, especially if it has a design like Pixel does, I don't like to jump into the logic. I like to get the UI ready to go. That means extracting the layout, the partial views, and even the components. And in this episode we are going to extract the artistsToFollow component. The artistsToFollow is in the right hand side, it's in the sidebar.

The artist to follow is in the right hand side, it's in the sidebar. And this should be a relatively simple thing. Of course all of these are static here. But what I want is a component that will supply an array of accounts to display. So here inside of the aside partial view, we can see where the artist to follow is it is this div element. So let's go ahead and let's just take that out and we will create a new component called,

So let's go ahead and let's just take that out and we will create a new component called ArtistsToFollow, and this is going to have a class because I want the class to interact with the database to pull that information and then supply that to the view so that it can render it. I want it to be self-contained so that we don't have to supply a list of artists from, you know, from the aside, partial view.

to supply a list of artists from, you know, from the aside, partial view. I want it to be standalone. So let's open up the view and let's paste in that markup. And right here, this ol element, that's where we are going to foreach over an array as artist. And then for each artist we will output the appropriate markup. But of course we want to build this array first. And we have a few users here.

But of course we want to build this array first. And we have a few Users here. So the first is going to have an image. And of course these are things that we can change later on. To me, the important thing is getting the overall idea in place so that it makes it a little easier when we get to the logic. So as far as the name here, that is AliciaDraws and the names themselves don't really matter. The images are really what matters.

and the names themselves don't really matter. The images are really what matters because we, we have actual images here. So we have Anne, who is just Anne. Then we have two other accounts. I think the next one is Mr. Anderson, welcome back, we missed you. And then we have, I think his name is Michael, which is a ELI think we'll check that and make sure, oh, we have Alicia draws.

a ELI think We'll check that and make sure, oh, we have Alicia draws. We have just Ann, we have Mr. Anderson and then Michael. Yeah, so we're good to go there. So that's now inside of this, for each loop we are going to build these li elements. And all we have to do is just output the appropriate information for each artist or each account. So here for the image,

artist or each account. So here for the image, we will simply output the artist image. Then we will have the artist name. And then we once again want to output the artist's name. Now of course, when it comes to actually following that comes later whenever we work with the logic. So you know, again, things are going to change a little bit. The important thing to me is that we get something that you know, is halfway working.

The important thing to me is that we get something that you know, is halfway working. So we have our component, let's go back to the aside and let's say artists to follow. And if we check our views, we should see our artists to follow. Everything looks okay. And you know, we can always change this so that if we wanted to be sure that we are seeing something that isn't cached, we can just change some value.

to be sure that we are seeing something that isn't cached, we can just change some value. And there we go. We can see we are indeed outputting our artists. So now all we need to do is take this array and we are going to provide that from the component class. And we're gonna call it simplyArtists so that then we can go to the Artist class. And we are going to have our artists so that we can supply that by calling compact('artists').

And we are going to have our artists so that we can supply that by calling compact artists. And that's gonna make it work. So that once again we can do a sanity check. We can see that it looks okay, but we definitely won't know until we make some changes. And, and sure enough, we see those changes take place there. So as far as this component is concerned, I'm happy with it. We will of course need to come back whenever we have, you know, actual data to work with,

We will of course need to come back whenever we have, you know, actual data to work with, but that's gonna be fine. There's one other thing that I want to do though, and that is open up our layout because I want to supply a title. So we will have a public string, we'll call it title, and we'll set a default value of pixel. So that's, if we go to the view for this component, which was layout.blade.php.

So that's, if we go to the view for this component, which was layout.blade.php. You know we have our title here, but we can output title, but that also means that we can go to the feed view. And now we can say that we want to set the title equal to pixel-feed. And we can do the same thing for the profile. So if we open up profile, then we can add that title pixel-profile and we should see those values in the tabs.

that title pixel profile and we should see those values in the tabs. So now we can see pixel feed, we can see pixel profile, and once again, we also see our artistsToFollow. And lastly, we need to commit these changes. So we created the ArtistsToFollow component and that will get us ready for the next episode where we will continue to extract our views and components.