Build a Fullstack App with Next.js, v2 GlassPane Container Component

Transcript from the "GlassPane Container Component" Lesson

[00:00:00]
>> Before we can start building out some of those pages let's get warmed up and build out some of these components first that we can kind of get ready for all the things that we're going to do. So like I said in this course we're not going to be writing CSS from scratch we'll be using Tailwind.

[00:00:15] Luckily for you, I got all the Tailwind classes here, so you don't have to go look them up and figure them out, they're right here. They're all in the right order that they need to be. So we're just gonna use these. So the first one that we are gonna make is this glass pane, is what I'm calling it.

[00:00:30] So if we go back and look at the app one more time, is this the app? This is the app. If we go back here and look at the app, it's like this frosted diffused thing. That's the glass pane. So we're gonna go make that a component so we can reuse it everywhere.

[00:00:53] Obviously, it's essential to the app. It's everywhere, if I go to slash home, it's here so we're gonna make that and kind of get our feet wet with making a regular React component. And then we can talk about whether or not if that component should be clients or server.

[00:01:06] I don't know. It's like it might be hard to answer. It might not be as easy as you think, so let's do that. Where are we going to make that?
>> The components?
>> Yeah, we're making the components. What do you think would happen if I tried to make it here in an app?

[00:01:24]
>> It won't work because it needs a page?
>> Yeah, you would think it would work that way. [LAUGH] It actually would work, you could put you could put anything in an App Directory. It's just if you want a page that has to be called page but you can put CSS in here, you could put other components in here.

[00:01:44] In fact I think next.js is encouraging people to do that, they're encouraging people to like, if you have stuff, just throw it in here and group it together. So for instance, for the case of like, if I had components that I needed for this layout, I could make them and just put them in this off folder next to the layout.

[00:02:02] I could put the CSS for this layout in this off folder. And it's fine, it'll totally work. As long as you don't use those keyword file names like layout, error, loading, page, template, it'll still work. So, to me it looks messy. I don't like it, like just stuff just floating out there and not unfold because then you start adding folders of a mess up the route path.

[00:02:22] So I think it can get really messy people like, well, let's organize all the CSS and in the off in a folder in here and then now you made a route. And you thought you were just organizing CSS files. So I typically just get out of the app directory for not making pages, go do that somewhere else.

[00:02:39] So, we'll do that and the components. So let's do that. New File, GlassPane.tsx like that. It's gonna be some interesting CSS stuff that I found out that thing is really cool. We'll see some of them here. But for the most part, it's gonna be a traditional components so it's nothing crazy.

[00:02:59] So the first thing we need to do is just make a component. So I call this glass pane. Set it to a handy dandy functional component, nothing crazy. Return a div. Pretty simple. And then what we want to do is this pane is a wrapper around stuff. It's almost a layout in itself.

[00:03:17] So it needs to be able to render its children. So we'll get access to those children like that, so we'll put them in here, there we go, nothing crazy, and then the last thing we need to do is just add some styles. So, we could do className, and this is where we're gonna add in all of our Tailwind stuff.

[00:03:36] So if you look at the notes, I have all the Tailwind styles there, but I also want to be able to extend this glass pane so you can pass in your own class names. So I'm going to say this thing can take in a class name as well like that.

[00:03:51] So this is where you can write all your classes and then I don't know how people would do it now. Do you guys just interpolate? Do you do back ticks? I hate writing class names. So I use this package called CLSX. Like this, you should have it installed already if you did the package json earlier if you don't feel free to install it.

[00:04:13] And I mean it doesn't really do anything crazy other than like string manipulation. So it just helps you write compose classes better in my opinion. So I'm gonna say clsx like that. And for the first argument, I'm just gonna pass in all of my Tailwind classes which are gonna be rounded and then we have rounded2xl and then we're gonna do border solid.

[00:04:44] I have what's this border to? And then we have border-gray 200. Something like that. And then after this, I'm gonna say className. And this thing's freaking out because it really wants me to export something so let me go ahead and do that. Wait, wait. I have an extra.

[00:05:11] There we go. One too many. Wait, where is this thing? Do I have one extra one here? Let me clean that up. There we go. Okay, there we go and then we export this. All right, and now we have a GlassPlane. The last thing we need to do is, there's gonna be a global style that we need because Tailwind doesn't have like a blur.

[00:05:51] It doesn't have this effect. I didn't see it anywhere. I don't really use Tailwind that much, so I don't know if it does. So I just made it myself. And we're just gonna add that to the global CSS and then we can just add the glass here. So I'm just gonna call it glass, like that.

[00:06:05] And then you can go into styles, make a new file called global, like that. And you can say glass. And then we're going to use filter and then we can say blur. And I don't remember the exact number but we can tweak it maybe blur like 16 pixels.

[00:06:35] And then we can say saturate, saturate just makes it more vibrant when it's underneath the glass. So I don't know you wanna go crazy you can do 200%. Let's go crazy. I don't know. See what happens. So that's glass and because it's global, we can just add it there, right?

[00:06:57] So that's fine. Cool. Regular React component. Nothing special about it.