Style a Next.js App Layout with Chakra UI

Vladimir Novick: [0:00] Let's add some styles to our app. We would use Chakra UI, which is a simple component library that we can use. It's using Emotion under the hood. To install, we will add a bunch of dependencies. Now let's go into our code editor. I'd use VS code for the rest of this course.

[0:31] To install, we would need to go to pages of JS and rob everything in ChakraProvider. We'll remove the basic status that was applied with Next.js and then pull ChakraProvider and extendTheme from @chakra-ui/react.

[0:51] ExtendTheme is used to take the default theme of Chakra UI and extend it with your custom styles, custom colors, and so on. We can actually get Getting Started guide and copy the basic styling. As you can see, it's using extendTheme. We can just copy the colors variable here. Then let's extend the theme with the provided colors.

[1:24] Now we need to wrap our component with ChakraProvider. We'll copy whatever we have here in the Getting Started guide.

[1:52] We need to return our app wrap. The ChakraProvider will also add resetCSS to our ChakraProvider as a prop. What it will do it will reset the basic CSS styles by the browser. Let's run our app, and get your localhost:3000. As you can see, styling has changed significantly.

[2:26] Let's create our video uploader page. We want to change the default page to have multiple components in it. At the top of the page, we want to have video input and video preview, and the bottom of the page, we want to see a bunch of transcripts from this video.

[2:45] Let's go to the index.js and change the default structure of the page. We won't need of that. First of all, let's set the header, but first, let's get rid of styles from Home.module. We won't need them. We import Header from '../components/header'.

[3:14] We would need to create this file. First of all, let's create components folder. Inside component folder, let's create the Header.js. Inside header, we'll import React. We'll import {Flex, Heading} from '@chakra-ui/react'.

[3:36] We'll export our header as the default component and return basically a flex as nav because [inaudible] sort of like a navbar and align it to center, and add mr=(5). We'll also add the heading with some letterSpacing, just to make it look nice. We'll call it Video Processing App.

[4:08] Now, if we go to all pages index.js, we can import the header, and we'll see it renders on the page. It's not that nice, but we wanted it to be. What we'll do to, we'll actually remove this as nav or wrap that in other flex. These will be our navbar.

[4:32] We'll add some backgrounds to it and align the things to center, add some spacing, add some wall draping, some wrap in general and a little bit of padding. Now, we can see our Video Processing App header looks pretty nice. It's time to create the rest.

[5:01] The Container, Box, AspectRatio for video sticks to same aspect ratio, SimpleGrid, Divider -- all of these components are from @chakra-ui/react. Wrap everything into container, assign some maxWidth. Then, we'll have box and input field. We need to have an input field where we can add our file, upload our file and submit to processing. We'll use InputGroup, Input type. We'll accept only video files for now.

[5:44] Let's also add video preview. Our video preview, we want it to have a specific aspect ratio. We'll use aspect ratio component. We'll have, obviously, some kind of button to send video for processing. As you can see, that's UI for uploading video and previewing the video, but we still need to have some sort of UI for processing data, something that we'll return back from API.

[6:30] We'll use SimpleGrid, and we'll have two rows. Even though for this example, we'll just use two columns. We'll use just one column and wrap things in Box with a bunch of default styling. I'll call it Transcripts pulled from Conversation API.

[6:54] I don't really like the gray thing here. Probably, we should switch to something more material design. Let's change it to boxShadow, add some padding with rounded corners. Let's remove the height so it will take the whole space.