 Hello everyone, today we'll be taking a look at typographies in end design. So in the last video, we created this button and we talked a bit about button and icons. But in today's code, I'm going to get rid of that button entirely because we're going to just be looking at typographies. So I'm going to get rid of all of those. The thing that we're going to need to import from end design to create typographies is import typography. And then what we can do is we can import titles from end design. We're going to have to import it with const title equals to typography. So basically what we're doing here is we are destructuring title from the typography object that we have imported from end design. So we can go and use that title component here in our app divs. So in title, we can add something like this is a title and I'm going to save this and let's just go and look at how it looks like. So it actually looks really, really nice, this title, this font. And I'm not sure what font exactly is that that they're using, but it looks quite nice. And there are a few levels that we can configure to the title. So you can add a level attribute that says like two, that's at level two, and it's going to be smaller. You can add level three, and it's going to be even smaller. So it's basically descending. We can go all the way to five, and it's going to be the smallest title, at least I think number five is the smallest level that we can go in and design titles. But I'm going to get, I'm going to just leave it at level, let's see level two, let's level two. Let's just leave it at that. Another thing that we can destructure from the typography object from nd is the text object. The text component is something that we can use in nd as well to customize our text. So let me write this is a text and then let's render that and you can see a text is just a smaller version that we can use for our content. So let me go and take a look at what attributes we have access to in the text component. So you can, in VS Code, if you're using VS Code, you can use the hot key of control and space and you can look at all of the possible properties and attributes that you can type in your components and objects. So I'm going to do type equals to. So we can see that here we have type of danger, success, warning, and secondary. So I'm going to do type of danger. You can see it's just red. It's basically just the colors of the text. I can do warning and I think it's going to be yellow and orange. Yes, it is a yellow, orangey. Actually you know what I'm going to do? I'm going to give it a style. I'm going to give it a style of font size, font size of let's do 50 pixels and I'm going to change this to danger so it looks more intimidating. Okay, now let me get rid of that and I'm going to copy and paste this text component for a few times because there are a few more attributes that I'm going to show you that so that you can differentiate each component from each other. So one of them is disabled and this will basically disable the text and it's going to be grayed out. And then there's also mark which is kind of like highlighting in end design and there's code which basically makes it look like code snippets that you can embed into your websites. Then there's keyboard and then underline we're going to take a look at all of these later in the preview and then we have a delete. So this is like red deleted text and then there's strong which is basically just bold text and then there's italic text. So let me save this and then I'm going to go and refresh this and actually I should give it a line break between each component. So I'm going to save that and let's refresh our page so you can see this. This is a disabled text and when we hover over it you can see that our cursor gives us feedback to tell us that this text is disabled and I can't highlight that. Then there's the highlighted text and this is the code text and then this is the keyboard text. So it's actually quite similar code and keyboard. You can see that it's just like it's just code snippets and then there's underline there's a strike through and strike through is just a delete. So earlier on I said that delete text would look red and deleted but it's actually not. It's just and design's way of saying strike throughs. And then this is a bold text and this italic text so nothing special there. All right so the next thing that I'm going to show you the next component that you can import from and design's typography object is the paragraph object. So with the paragraph object can do stuff like make editable text and you can copy the text with a button to your clipboard and I'm just going to show you how to make these two editable text and copyable text because that's like the most common thing that we can all use and the others even use the others you can just go to the documentation and look at the code and see how it's done. So let me go back to the code and show you how it's done. I mean delete all of these because we don't need them anymore and then let's import paragraph from typography. Paragraph is a component that we can use in JSX and then let's say editable actually let's do copyable paragraph and then to make it copyable we just put copyable here in our attributes and it's just as simple as that just a copyable attribute in your paragraph component. So let me refresh this and let me change the style to make it larger. So those of you on small screens can see it better. So font size of 50 pixels. So we have a copyable paragraph that you can just click on the icon and copy and when I go to the new tab and I paste command v paste and you can see that it's copied and if I change this or something else this is something else that's going into your clipboard. Then I'm going to copy this and then new tab and I can paste and can see that this is exactly the text that's going to get pasted in. And finally let's look at how we can make this text editable. So here we just have to replace this copyable thing into editable and then when we reload this and we can go back to our browser tab I can instantly change this text here. Now one thing you're going to notice is that it actually looks really ugly because it fills up the entire width of the parent element which is currently the viewport of our browser window. So I'm going to change that. I can say let's put width in the styles here. Let's put this to be a thousand pixels. It's still quite crazy but not as crazy as it used to be and you can see it's still stuck to the left side of our screen. So I'm going to give it a margin left. So margin left. Let's give it 500. Let's take a look at that. Now when I click edit you can see it doesn't look too crazy anymore but it doesn't stop there. So instead of leaving the editable property just like that you can add an object to that prop. So we can say like a tool tip. Let's change this. Edit me please. So when I save this and I reload this you can see that when I hover over the icon to edit this text you can see it says edit me please. So this is something that you can change. The tool tip isn't the only key that you can add into this object here. So when I do, if I do a comma here and like the control space you can see all of the available props that you can add here. I'm just going to do icon for now. Let's do icon equals to less important icon from end design. So we talked about icons in the previous video so be sure to check that. But let me just look at the edit icons here. Let's see. Does this look same? Okay. We're going to take this form outline icon here. Let's just click on that to copy that. I'm going to do icon equals to form outline. I'm getting an error here because this is what happens when you code into many languages at the same time because that should be a colon instead of an equal sign. So let's import this form outline icon from end date. So import form outlined from at end day at end design that end dash design slash icons. I'm sorry. So let's save that and let's reload this. You can see that icon is going to change to our custom icon. One thing that you're going to notice is that if I come here and I go and edit this text, this is now another text and I hit enter and you can see it just refers back to its original text and it doesn't really do anything. And the way we can fix this is to use states. So the way we can put our text in state here would be to add the unchanged prop here. So unchanged is going to take in a function that I'm going to define soon. So let me import state from react. Once again, this is nothing specific to end design. This is more of a react technique. So I'm going to import you state from react and instead of our functional component here, you can say const of my text and set my text equals to use state. Let's begin. This is the initial text in state. So if you don't know what I'm doing here, this is basically how you can set states in react. If you're going to learn more about this, I have videos that cover states in react. So let's go to unchanged here and pass in that function that set my text function here. So set my text is basically a function that we can call to change the state which is stored in my text. So I'm going to just pass that into our unchanged here and I just realized that I spelled this wrong. So I'll change. Let's save this and then instead of putting this is something else going on into your clipboard here. I'm going to put in my text. So my text is just a variable that contains the state information. I'm going to save that and let's reload this and you can see this is the initial state. And when I change this, let's say this is changed and remember from the first time we did this before we implemented state when you hit enter is going to refer it back to the original text, but when we use state when I hit enter, you can see that it actually changed and going to be persisting across our edits. This is changed for the second time and can save that and you can see it's actually changed this time. Now, of course, if I reload the browser tab here, you can see that it goes back to its original text. So if you want this text to persist across different browser windows and different users, you'll probably want to use a persistent back end for this where you store all of your information. So this is how you do typography in and design and in the next video, we'll take a look at how we can manage the layout of our app in and design.