[00:00:01] Welcome back to the reality of course in this guy. We are going to be adding in the title component the title component. So let's go ahead and get started. Let's out our file in our agency folder let's call it titled. And then here we want to just have our normal kind of layout for our functional component. Let's copy our border component since it's very similar. And with calls all of these files before we start. So make sure you copy it and it had a border component and then throw it in that title. And then what you want to do is we want to change just to that title and then in here let's say that in a day and let's call it let's say title title or we could say title tax and then we just want to say a title and then we need to pass in a parameter that's called title that will be our text and that's where that is coming from. OK. So now when we need to do is change the title it's called title and then they export the file Title. Now this should be ready except for the silence. So let's go ahead and add a call and title that sees us and in here we will put our styles. So let's see what styles we need. I'm going to inspect this. Looks like we needed this which is pretty simple. It's a farm family color. [00:01:46][105.7]
[00:01:48] And then just kind of basic code that we did for our Henares was going to copy that from our paste in here and then I'm going to get rid of the logging and I'm called Title underscore underscore tax. We're really fighting with like always. I'm going to actually get rid of the farm family and what I'll do on the farm families I'll go to you or me. Nice yes nice and putting in our body. Don't worry we don't want to keep declaring our farm family home as it's different and that should be good. Let's say that let's use our component now. Let's go to our site and use it there. So notice we already have at her word but that's not a problem we can import it and just had it. And then just put the board in as a parameter. So let's say import Tyronne from our flash agency slash title. Now I said we put border in as a parameter but we want to actually add in the title as Rembert because the fact you cut this and say I title and then put in the header border and as a parameter and then add in the text log in you'll notice that it's WASM Sihasak logging up here and then the border is on. You don't want that because the border is now a child that is not quite the period within it because within here we're displaying our children and this is that this ends up being the header title for it to come out and it real quick. So if you notice know how the text is getting in there we have our parameters here child and title nor pretty title that or tax or title is just a tax. Now if we go to our signing that's where logging is going and that's time. [00:03:36][108.2]
[00:03:37] So the next thing you want to do is basically just swap these so let's go back to how we were going to cut this entire thing out and paste it right here. And then I'm going to cut out the hard hat and work with signing and put it back in. We saw how we were except we had tied all along. Now what we want to do is actually put signing in here as a parameter around title and then we want to put the title in as the Adhanom borders. Right now we will nest correctly. So save it. Let's head to our app and see what we got perfect service down there. Now we just need to add in the wind here. So this is basically a separate even the design I just noticed so we won't be doing this. It's not going to work or it will work. But is it easier just to add a border to our logging tax. You'll notice it has a high of 3 pixels or one pixel art assume that freedom box. So I feel like this code is just off and that's another reason to be careful with the invasion are generated see us. Okay so I'm just going to remember the color it's 6 6 6 and then we have a log in and it's about 12 pixels away. So we need and I'd like him hiding of quote pixels to our box. Are we out of number so let's say let's before me or antialiasing says let's just say the word quantum. 1 pixel solid he's 66. He's 6. I think that's super Karpeles. [00:05:15][97.6]
[00:05:18] It doesn't matter I'm just I want to be Kapolei. So now what we want to do is padding so I'll show you what that looks like. Doubt it. Okay so let's remove the s. It's not there. Maybe it is that she can't see it pixel solid. So let's see. We want. We probably want to see a check for color on this. Right the 666 machine and get a temporary high like 10 pixels just so we can see it. I can see it. See we need to do Seaborg and pixel solid grain when it comes out interesting. Let's get worse. Title and just add it to the title. The border flow is a Steve not sure it's not showing up with Saboor here. Compu they. Kids should be working through police and Tyrone. OK it's not working for this either. OK. I doubt it. Maybe it's because we're not importing or idling or menas us. Yeah okay pretty dumb. We're just not importing are out of time. Let's say I imported Sosh title my car and we'll see a Ohia nationally seeing it. Let's go back to our seats here and let's go back to what we were so I'm going to cut out the border here. Get rid of that. I won't even cut out of this type of E6 C6 he six cables that should be right now. Yeah OK. Now we just need to specify that it's only in the bottom OK great. Now we need the padding of about four pixels. We're great looking good. Now let's just put in the space here. So from the top. [00:08:39][201.1]
[00:08:39] Well we'll have that into our form. So we'll leave that leave this as it subsidies for now but we have our titling here for Congreve. Let's throw it into our sign up component as well. So if I were to sign up we saw the header on the board and we don't have the code. This should be here. Sign up did we not know not before we got it. Maybe we didn't believe it. But it's not in the title so it doesn't say sign up for say import potato from flash or see flash and don't slash Josee. FLEISCHER That title Keano. As usual it comes up and you say title Sam. Let's get rid of this passing green account we read on the page. We have our title here he says create account and it's looking great. We're also going to need the border. So let's say important border and border. From such agencies slash and hand border. Now I'm going to put this down the lines we can separate our components and then we want to say border wrapped the entire thing. We should be chosen let's go ahead and check it out and we have a border super awesome reuseable really clean and look how many lines that go. This is not even any just to imports and exports here to get all of these styles in over against. We only have to write them once. That's really nice and convenient and that's the purpose of that the purpose of components component driven. [00:10:52][132.5]
[00:10:53] So let's go back to our signing form and let's go on to the next guy where we will start styling our signing form component. So commit our code seeking status get and get commando style attack added and title company and applied to a few who applied to sign in and sign up component's right. Catching the next guy. [00:10:53][0.0]
[645.1]