[MUSIC] In the app panel, we now need a way for the users to browse the books. So let's go ahead and add a book resource. Let me open the terminal. PHP, Artisan, Make Filament. Sorry, Make Filament Resource and the Model is App Models Book. The title itself is the title attribute. I would like this in the app panel. I would like to generate a read-only view page. So yes.

I would like to generate a read-only view page. So yes. And yes, the configuration could be generated from the current database columns . It's created successfully. Let's open the book resource right here. Just make sure that you're editing the correct file in the correct path because we do have another book resource in the admin folder. Let's go to the browser, refresh. We do have the books resource here, and this is good.

Let's go to the browser, refresh. We do have the books resource here, and this is good. Notice that we don't have a way to create a new book because I am a normal user . Also, I can view, but I cannot edit. Let's go back. I don't want a way to be able to select the books because there are no bulk actions that I would like. So what I'll do is let me edit the configuration for books table.

that I would like. So what I'll do is let me edit the configuration for books table. This is a new filament four way of doing things. So if you haven't seen this, this is what it looks like. Everything is neatly organized separately. So let me open the books table and here I will just remove the toolbar actions entirely. I would also like to remove the record actions. We'll be adding this later and with the filters as well. Let's keep it minimal for now and refresh.

We'll be adding this later and with the filters as well. Let's keep it minimal for now and refresh. And we don't need the created at an updated at. Let me just remove those three. We simply have the title, author and image and it would be great if the image is on the left starting with image. So let's just put image right here and refresh. Great. Now this image is obviously not visible.

Great. Now this image is obviously not visible. It is too tiny. This is something you can change using the image height or the image width. So let's use an image width here because some covers might not have the same aspect ratio. And when we are displaying it in a list or any other format, if it's of different widths it might not look good. Let me add a width of 80.

it might not look good. Let me add a width of 80. We will see. Yeah. So this is the 80 pixels where it's that I need. This isn't pixels, but the height is being cropped by default. I need to add an image height also. And here you can either specify a specific pixel value or you can say auto. What this does is it just automatically adjusts the image height based on the image.

What this does is it just automatically adjusts the image height based on the image. All right. Let's make some changes to the title and the author columns now. For the title column, let's increase the font size using the size method. And here you need to specify the text size. And the ones available as you can see are extra small, large, medium and small, since largest, largest, let's pick that and let's see what this looks like. Yeah.

largest, largest, let's pick that and let's see what this looks like. Yeah. So this is what large looks like. Let's increase the font weight now using the font weight method. Sorry, not the font weight. I think it's just weight. Yeah. Once again, here we use font weight. I think semi bold should be good here refresh. That's great for the author.

I think semi bold should be good here refresh. That's great for the author. Let's change the color to make it a little more prominent, but not too much. And by using the color and here you could use those colors which we defined in the config by simply saying primary or accent or any of that. Let's use the primary color here. Filament will automatically pick the shade that is more apt. Let's refresh and that appears. Now this is not the way we would like to display each book in a table layout.

Let's refresh and that appears. Now this is not the way we would like to display each book in a table layout. This doesn't look good at all. And also, if you make this responsive, you will have to scroll on mobile, definitely not how to do it. Filament allows you a way to make these columns appear one below the other on smaller screens. The way to do that is using a split component. Let's wrap all these within a split component.

The way to do that is using a split component. Let's wrap all these within a split component. So split, make, wrap them like so. And you'll also have to mention how would you like to, okay, I have to import this import last perfect. You also have to mention from which breakpoint you would like it to split as in this breakpoint. Let's say you put something like MD, you will see it like so. Once we reach the MD breakpoint, it will show this in flex direction row.

Let's say you put something like MD, you will see it like so. Once we reach the MD breakpoint, it will show this in flex direction row. You can even remove this. Let's see if we remove what happens, refresh. And you will see that all the columns collapse right now to make everything visible in on a mobile also, we are almost there. Now image on the left, but we would like the title and the author to stack on top of each other on any breakpoint.

top of each other on any breakpoint. For that, let's use another component called stack. These are the two columns we would like to stack. So let me wrap them within a stack component and let me import this as well. All right, let's see what this gives us and great. This is how we wanted it. Only thing is filament automatically adjusts the space based on the size of the columns, but that's not what we want.

columns, but that's not what we want. Because we have defined the image width to be exactly 80 pixels, we don't want this space here. So we don't want this column to occupy more space. The way you can change this is you can use the method grow and set it false. So this column doesn't grow to occupy more space if it's available. Okay. This is great.

Okay. This is great. There's another thing you can do with stack that is you can add some space between the two columns using the space method space and you can, you can say 1.52. This follows the tailwind spacing scale. So one is actually four pixels, see refresh. Yeah. If you could make it, this has changed. Okay, let's see.

If you could make it, this has changed. Okay, let's see. So this is what we have on mobile. This is okay. But on desktop, it's too much, right? There's a lot of empty space here. So instead of the list view, why don't we use the grid view? That makes it look so much better. For our use case, the right here, make these columns appear in a content grid, okay, where

For our use case, the right here, make these columns appear in a content grid, okay, where you can specify at each breakpoint how many columns you need exactly like this, but let the default be one of course on mobile on SM, we might not need to, that would be too cramped. MD, we would need to and at Excel, we can make it three. That's it. That's the max.

That's it. That's the max. Let's see what this looks like refresh. And that's great. Right. On mobile, we have one single book in each row and as we go higher, we get two of them and in a much larger size, say, but then make this thousand four hundred or something. Yeah, you will see three columns like so.

something. Yeah, you will see three columns like so. They're already looking much better, but at any point, you can add your own view anywhere if you feel this is too restricting. Say, for example, you want a much larger size or you want a different spacing, you might want to use flex. Something else. What we can do is instead of stack, let me just comment this out.

Something else. What we can do is instead of stack, let me just comment this out. You can add a custom view using view, which is filament tables, columns, layout , view, make, and let's give the exact path filament, our resources, books, tables, book info view looks good, but this doesn't exist. We will have to create this, maybe not tables. Yeah, this is okay. Let me just create this resource within resources, views.

Yeah, this is okay. Let me just create this resource within resources, views. Okay. So I've just created the blade view here as expected. And now if we just refresh the browser, we shouldn't be able to see anything because we haven't added anything here. Let me just paste the custom view here. This is plain HTML and tailwind CSS, I'm just using flex, flex call. And this is how you get any of the fields.

This is plain HTML and tailwind CSS, I'm just using flex, flex call. And this is how you get any of the fields. So using get record and title, then get record author, you can add your own tailwind classes. I have added another span so I can add an extra word, things like that, which you cannot do in columns. If you really like that, you can add this. Let's see what this looks like, refresh. And yeah, sometimes the styles don't show up immediately.

Let's see what this looks like, refresh. And yeah, sometimes the styles don't show up immediately. And what you'll have to do is probably just run NPM, run dev once again, I have it running in another tab, I guess. And also do check this path looks like since we had added this theme dot CSS within an admin folder, but moved it up one level, we will also have to remove this. It was very hard to figure this out. I spared you the time.

It was very hard to figure this out. I spared you the time. And once again, let me do NPM run dev. Fresh. Yes. So this works right now. So it's up to you whether to use the view or to keep the columns as it is. I will just comment this out, but use the filament stack and columns that are available. Okay.

available. Okay. So this is where we are. See you in the next episode.