So, as a quick recap, we now have our custom form colour picker. We have our custom form section. We have our custom infolist colour entry. And now we're going to do exactly the same with an InfolistLayout component. InfolistLayout components are pretty much identical to FormLayout components. The only difference between the two is that they extend different base component classes. Here I've implemented an identical view to our Form in an Infolist. So we have our six colour entries. Each of these colour entries has a different colour assigned to it. And we're using the built-in Infolist section.

Each of these colour entries has a different colour assigned to it. And we're using the built-in infolist section. We can replace this with our own section. So let's generate it using the terminal. php artisan make:infolist layout. And the name of the layout is going to be section, same as our form. In the Section class, we can copy exactly what was in the forms Section class. So let's copy everything here into here. The only thing we're keeping different is the view. So just to recap, we have our properties that store the description, the icon, and the heading.

The only thing we're keeping different is the view. So just to recap, we have our properties that store the description, the icon, and the heading. We have the __construct() method that sets the heading. We have the make() method that injects the heading into a new instance of the Section. We have our setters for description and icon. And we have our getter methods that evaluate the heading, the icon, and the description. And unwrap any functions that we have. Now let's copy exactly what was in the forms section view into the infolist section view. When this infolist layout component was generated,

into the infolist section view. When this infolist layout component was generated, it had this getChartComponentContainer in the view. This is identical to form components. Both forms and infolists share the same layout engine. So now all that's left to do is to use our new section component within our infolist. And if we refresh, here's our new section design. Now you might be thinking, how can I avoid writing all of this duplicate code across two components? Now I use a trait for this. So let's go into our project and generate a new trait.

Now I use a trait for this. So let's go into our project and generate a new trait. So in the app directory, I'm going to create a new trait in app/Concerns. And it's going to be called CanBeSection. And this is going to contain all of the shared properties and methods from both classes. Now let's use this trait. use CanBeSection on the InfoList component. And we can do the same on the Form component. And get rid of all of that duplicate code. Now we can do the same for the section Blade views.

And get rid of all of that duplicate code. Now we can do the same for the section blade views. So let's make a new section blade view in views/section.blade.php and copy everything in. Now on both classes, we can simplify this down to just section. Because this is living directly in resources/views. Now if we refresh the browser, nothing has changed. But we have much less code now.

nothing has changed. But we have much less code now.