All right, so let's do this. If you don't mind, why don't we take 10 minutes and focus on the visuals of the website just to make it a little more real life, a little more policing to the eye. So with that in mind, we're pulling in tailwind, right? Why don't we also pull in a component library like Daisy ui, so that I can rapidly construct navigation areas or cards or dropdown menus or buttons. Sound good? Let's get going.

or dropdown menus or buttons. Sound good? Let's get going. So if you're working along, visit daisy ui.com. Let's come down to how to use, and then eventually I'll show you how to set up vet and bundling. But for now, we're just gonna reference tailwinds and da UI on A CDN. Alright, so you can see we need to reference da ui. Here's tailwinds.

Alright, so you can see we need to reference da ui. Here's tailwinds. And then if we want custom themes, we need this link as well. All right, let's get going. I'll copy that. I'm gonna open my layout file and I'm gonna paste this in. Okay, and then finally, we also want some custom themes. Cool. So now very quickly, this, uh, allows us to do things like, well, how about for a button? We get some free classes, like button info, button accents,

to do things like, well, how about for a button? We get some free classes, like button info, button accents, and it's already styled, so it allows us, it's kinda like bootstrap, but for tailwinds, uh, with a little more configuration. So here's button sizes, button colors, and you can see you reference these classes like button and button primary. So it's gonna allow us to very quickly construct some of these various components that we might need.

So it's gonna allow us to very quickly construct some of these various components that we might need. Alright, so with that in mind, why don't we start with the navigation area. So I will look for a nav bar and yeah, we're just gonna find whatever we need. Um, let's see. Nav bar. Hmm, which one do we want? Do you want something like this? Do you want you just find the one you like? Maybe something like this, logo, navigation,

Do you want you just find the one you like? Maybe something like this, logo, navigation, and then maybe a call to action. Alright, so I will go to HTML. I'm gonna copy this. And here is our layout. So we're gonna get rid of all of that for now. And then at the top here is our navigation. Alright, so check this out. If I come back and refresh our page now, uh, we have a nav bar.

If I come back and refresh our page now, uh, we have a nav bar. Again, very easy to implement. And if you want to allow for custom themes on your HTML tag, you can do what is it data theme. And there's a big list of options here. So here's nights, I think there's one called coffee, there's one called Dracula. And all of the components are styled with this in mind. So if you want to take a look at your themes,

And all of the components are styled with this in mind. So if you want to take a look at your themes, is this it theme controller? No, that's not what we want. Um, here we are. Uh, you can see all of the different ones we can reach for. So maybe you wanna do business, uh, then if I were to switch back, update this, and now I'm using the business theme, you get the idea. Okay, anyways, I'm gonna stick with dark for now. Next, uh, why don't we add

Okay, anyways, I'm gonna stick with dark for now. Next, uh, why don't we add a little bit of alignment here. So on this we'll set a maximum width of three xl and then the margins to auto. Yeah. Alright, so now if I switch back, why don't we take the entire navigation area and let's move that into its own component if only for cleanliness. So you could do, once again, if you wanna do a folder,

only for cleanliness. So you could do, once again, if you wanna do a folder, syntax or um, structure, you could do something like that. For now, I'm just gonna stick with naf. All right, so let's go ahead and create that And paste it in. Come back, refresh. And now our navigation area is in its own file. Today, you can imagine we can update these things like, uh,

area is in its own file. Today, you can imagine we can update these things like, uh, let's find Daisy ui. And this can now be maybe your app is called Idea. People like to do the singular form for business names or restaurant names, like a restaurant name called fork, you know, um, so that's good. You'll see it has your mobile layouts. So let's do this. Like, let's keep it pretty simple. We'll have, um, home and then maybe a link for new idea.

Like, let's keep it pretty simple. We'll have, um, home and then maybe a link for new idea. Yep. So now if we view this in responsive mode, you'll have, uh, your links there. Great. Uh, next, let's do the same thing here. No dropdown, but we will have home new idea and then we can just update this. So maybe for now, the homepage is the ideas endpoint, and the new idea would be ideas slash Create. All right, so here's all ideas

and the new idea would be ideas slash Create. All right, so here's all ideas and here's the link to create a new one. Cool. And then down the line, maybe this will be like the, the login button. Once we add authentication or register, you know, whatever you want. Looks good. Alright, so now I'm thinking each of these should be its own card. So yeah, we're not gonna spend tons of time here.

of these should be its own card. So yeah, we're not gonna spend tons of time here. I just want you to see the basic workflow so that you can do this on your own if you want. So we have a bunch of different card style here. And again, I would just scroll through it until I find one that is appropriate for what I want. I think I want something like this. Uh, maybe like a neutral card so I can see here. All right, I'm just gonna grab that.

Uh, maybe like a neutral card so I can see here. All right, I'm just gonna grab that. We're gonna go into our index view. Here is our card. I'm now gonna replace it with this, and we will have a look. All right. Uh, why don't we use a grid here. So up here I'm gonna say tailwind grid, and I'm gonna have two columns, and then maybe, uh, a gap of six in between each. And then a gap of four, uh, for the Y axis. Yep. Next, each, um,

And then a gap of four, uh, for the Y axis. Yep. Next, each, um, each card doesn't need any buttons, all right? And it doesn't need to be centered. All right? Uh, maybe item center two. There we go. Um, I think at the moment our ideas are just a string, but in real life, your idea might have a heading and a description, and then later, we'll we can add an image to it, um, filters, things like that. So for now, why don't we just stick with this

to it, um, filters, things like that. So for now, why don't we just stick with this and this will be our ideas description. And here you go. Uh, I still want these to be clickable, so let's make this an anchor tag that goes to the dedicated idea. There you go. So let's go back home, build a house. All of this is working. Very cool. So now I can get rid of this, and I think this is a prime candidate

So now I can get rid of this, and I think this is a prime candidate for its own blade component. That way. Um, elsewhere on the site, if I wanna render some of my idea cards, then I have the ability to do that without duplicating this markup. So what do I want it to be? How about just card? Or if I wanna be a little more specific, I could do, uh, idea card. Why don't we do that one? Let's come back.

uh, idea card. Why don't we do that one? Let's come back. Here's our components. Create a new one idea card. Notice I just paste the whole thing in, and then I, I make it generic after the fact. So for example, uh, I would never hard code the HF, so that can be passed in. We've learned that we can do, um, attributes merge like this. And then finally here, why don't we make this our slot,

attributes merge like this. And then finally here, why don't we make this our slot, actually, okay, so now we have a component for an idea card. If I switch back, it's back, let's do our slot and I can say, hello, take a look at this. It says hello. So once again, we bring it back to our idea description and we can do it like this. Or again, remember if you, if you want it to be a prop, instead, you can pass it through as a prop or a slot. And sometimes which one you choose will depend on like, uh,

instead, you can pass it through as a prop or a slot. And sometimes which one you choose will depend on like, uh, how complex is it? Do you have a lot of HTML tags? In those cases, you might do a dedicated slots, uh, in other situations you'll just want a problem. All right, so it's up to you. So now this looks good, and yeah, elsewhere, if I want a dedicated card, I can now do, so for example, maybe we click on did I do this right?

I can now do, so for example, maybe we click on did I do this right? Oh yeah, we have to pass through the re uh, anyways, maybe we click on one of these and then below it you have something like related, uh, idea cards. Well, now we can do that, right? I could go in here and then maybe I could have an idea card that will go somewhere. Um, related example idea card. You get the idea.

that will go somewhere. Um, related example idea card. You get the idea. Now I can reuse those styles, uh, wherever I want to, which is cool. All right. Uh, now why don't we make this its own little layout card. So once again, I can do card. All right, let's give it a background of neutral or something. There we go. A little padding.

of neutral or something. There we go. A little padding. And once again, this also can be be its own component, like a panel that you can reuse, uh, anywhere you need to, no need for margin top. And then let's not hard code the text. Yeah. Uh, next this MT six, notice it pushes it up right up to the nav area. So this is an example where I'd go to the layout file and say, okay, it sounds like the main area should always

So this is an example where I'd go to the layout file and say, okay, it sounds like the main area should always come down just a little bit. Uh, and here we go. All right, let's go into create. What else can we do? Uh, we can use their button components. So I can clear that out. Let's get a new, and now you'll see it's uns styled. I can style it now button and we have a save. Uh, what about text areas? Yep, same thing. Empty that out. It's uns styled. Now I can use one of their components

Uh, what about text areas? Yep, same thing. Empty that out. It's uns styled. Now I can use one of their components for forms and that looks a little better. And let's make it take up the full width and you get the idea. Um, what else? Uh, let's edit an existing idea. So let's go to show, let's change this to button. And again, you have things like, um, button primary. Here's your primary button. Here's, I think there's one for accent.

Here's your primary button. Here's, I think there's one for accent. Here's a secondary button. I think there's like either ghosts, maybe not. Yeah, I think that's, that would be a ghost. There's soft styling. Um, again, research this on your own. Alright, so if we wanna edit this, it takes us to the edit form and yeah, we can just update all of this stuff. Use text area. This can be button,

we can just update all of this stuff. Use text area. This can be button, maybe our primary in this case. This one can be button and button. I think there's one for error, although that wouldn't be right. Maybe warning button, neutral, uh, whatever you want. Cool. Uh, text area should be with this full. Now we can clean this up a little bit. You get the idea. Alright, what else? Um, don't forget

Now we can clean this up a little bit. You get the idea. Alright, what else? Um, don't forget because we have theme support. I can go to my layout file and you can play around, right? You can go to your light theme, you can do your Dracula theme. It's kind of fun. You can do your coffee theme, you know, let's do Dracula for a minute. All right, new idea. Um, we can add some custom, uh, validation support.

All right, new idea. Um, we can add some custom, uh, validation support. So for example, if this fails validation, maybe you want this text area to have a red border, right? So you go into your create view and yeah, right here, um, they do have validator classes you can use, but you can also just dynamically add this. So we can use that, uh, error directive that you learned about in the last episode.

So we can use that, uh, error directive that you learned about in the last episode. And we can say if we have an error for description, then let's render. Um, something like text area error. All right? Try it again and now notice that it gives it a red border. So maybe that's something you wanna do. And then we can do the same thing here. Instead of red 500, we would reach for some

And then we can do the same thing here. Instead of red 500, we would reach for some of their dedicated, um, colors, like text error. All right? And now those will match up. Cool. Alright. And you know what? I think you get the gist of it. You can fill in the gaps on your own. Alright, so now if you're working along and you're building something, as you watch this course, if you use DCUI, you now have a massive component library that you can reach for drawers and dropdowns and fields

if you use DCUI, you now have a massive component library that you can reach for drawers and dropdowns and fields and alerts and heroes. Uh, it's actually really extensive, so it's great, especially when you're building something rapidly and you're learning. Um, I like it a lot. Okay, so now in the next episode, we're done with UI for a little bit. We're gonna start a brand new chapter on authentication.

with UI for a little bit. We're gonna start a brand new chapter on authentication.