Okay in the last video we put together the default Streamlit component or custom component and Setup our environment for actually building our own. So what we have at the moment is pretty simple we haven't really done anything we just have this custom component Streamlit and we can see the code for this component as well if we have a look over over here so this is just a default component we're not actually doing anything here.

We're just actually not in that file it's in the init.py here. We're just running this using nothing more than this code here. Okay so we have this my component object but that's all that you can see where we're like clicking and everything else so this here it's hello James click me that's hello world click me that's all it is it's just a little object.

So what we want to do is actually create a card component based on material UI which is what you see here like this sort of card we're not going to make it that fancy although it's really not difficult if you want to take it up further you definitely can.

What we're going to do is you're going to take like a title a subtitle we're going to include body of text like this and we also want to include like a button not like well kind of similar to this way we have like a circle and we hover over it and if we click it there's this nice little ripple effect.

Okay so let's start putting that part of our component together the actual code that creates this card. So most of this is going to come from this card component of TSX file and now in here at the moment is there's a lot of code like far too much we don't need all of this we can delete a lot of it so let's let's do that first before we do anything else.

First I'm going to change this to any, I'm going to remove all of this. We don't need the state variable we also don't need this name variable as well but I'm going to keep it in here for now because this is how we pass arguments to our card so we're gonna title, subtitle, body and link.

We're going to remove the theme, we don't need this. We do want to include something here so this is where we return the actual HTML that controls our look and actual structure of our code. Okay so I'm going to remove these functions that we have here as well don't need any of these these are all very specific to that default component that we saw and then the rest so the rest of this are actually we do need.

I'm just going to remove, we don't need so many comments for sure. So yeah that that's basically everything we can remove and I'm also going to just clean this up or just remove everything actually for now so we'll leave it like this. Okay so this here is it's very core what we need in our component in our React component so if we switch over to our hosted version of our component now we should see that's pretty much well it should pretty much be empty so yeah okay so now we just have this you click zero times but that that like click me part of the component that's not there anymore it doesn't exist okay I mean it is actually still there but it's just a it's just some empty span tags there's nothing nothing we can actually see.

So now what I want to do let's modify this so that we can have a different app or a different way of viewing our components so come over to init.py okay I'm just gonna put this is like test one we have our components and I'm gonna have I'm going to include this divider test two this okay and then here I'm just going to put anything really oh and also remove this okay rerun okay now we just get this now let's add some something to our component so so if I go to here let's go to the card component txt what I'm going to do is I'm going to copy this paste it a few times and I'm going to include the components or the parts of our card so I want to have a title subtitle a body and a link okay and we'll just rename these as well title okay move that as well now so now if I switch back over to the local host rerun we're probably going to get an error I would expect to see some sort of error okay so actually okay that's fine so at the moment we have that name and everything in there but they're not being used and they're also not being passed to our component if we look at our code in init.py we're just passing this one parameter and also passing key now our component doesn't include any of those it actually includes these like title, subtitle, body and link so how do we how do we add those in we head over to init.py and scroll up a little bit and we see the definition of our component this acts as like the middleman between our components actually should be called a component and later on we should be calling this card component as well do you have any of my buttons okay seems fine so in here we are accepting just name we don't want to accept just name we want to accept all names as well so I'm going to remove most of this and I'm going to swap this out for title, subtitle, body and also link okay so we passed those in and then in our component function we also need to pass those so let's go title, subtitle, body, link now we can remove these other parts for now so we don't need this key.

Key is useful if you have multiple components and they have certain action on them so you for example press to expand them you want to include key as you would pass just like a random number to each version of that component and that allows Streamlit to identify those each of those individual versions of your component as actual independent components so when you press the action expand one it doesn't expand all of them but we're not we don't have any actions I don't think so we don't need to worry about that okay we also don't need to return any component value so before where we saw it was saying like you would click and it was increasing that number that's what was going on there but we we're not doing that for our component we're just displaying some information or modifying anything okay now if we switch back to our local host we probably see an error so we rerun and we get this type error card component missing three required position arguments now the reason for that is because when we're actually calling our component in later on in pi we're only passing a single parameter to it which is a big hello world so we need to pass at least four okay one for each of these arguments that we have so let's have a look at that in here okay so we have card component and we're passing at the moment this is just a title we want to pass okay let's say do title sub subtitle and have some some random text here for the for the body now we also want to have a link so I'm gonna go google.com okay and then let's just copy this component this isn't returning anything so let's remove this as well so let's copy that and this is going to be number two so the title to add some more text in here and yeah just leave it with Google it's fine I don't want to change too much now let's have a look at our logos rerun and now we have this so we don't still don't have anything in there let's have a look at why let's try to figure that out so we have our card component create this is how looking in here okay so at the moment we just have span okay we're not actually showing any of these any of these parameters that we've passed to our component so let's go ahead and do that we have let's wrap everything in it in a div and then I'm going to go just page good second heading for the title so to pass actual variables into here we just use each curly braces for subtitle and then we also want to include the body so body and also a link so for the that will just use a breath again using the curly braces in here as well as a link same for this link now let's have a look at what we what we get okay so we can see that we have our component now we have the title subtitles and text and body link like that and it will or it should take us to Google doesn't seem to work at the moment I'm not going to worry about that now but we'll make sure we get working for the actual card okay so that's we have the key components there but we need to actually format this into the material UI card so let's let's go and figure that out we'll come to here it will let's copy we'll copy this one maybe so an earlier one yeah let me I'll copy this one it's our line card here okay so there's a few things in here we need to need to make sure we include so we have these imports so we have a card card actions that's where we have like the button or where we will place a button so I'm going to import all those we do here save that and then we also want to include all of this stuff here so we have a card I'm going to down just copy all of that and let me paste after our link here so I can keep track of everything to the topography okay so we also need to add card around this I figure out in a minute that was so let's remove a few things so we have topography I want to so the body I'm going to include in here other topography to just remove I don't really want those button we're gonna modify all this so let's just leave it like that remove those and now we should see a card let's open this look okay so we kind of see we actually just have this the contents of the card I actually have the card that's because we also add the card tag in there as well so if we just do card the variant is outlined so yeah so I mean so this bit here should be everything should outline have this on the on the outside so basically all of this in here all this constant card is actually being inserted and to this wrapped within card so that's why we can't actually see it at the moment so add this and we should it should work now we should be able to see something okay so now we have our card so we have the body of that but we need to include title subtitle and this learn more is it is a button at the moment I want to make it like a like an icon button so we'll modify that as well so let's return to this I want to include the card header I go here card header and here we're going to have the title and also the subtitle so we have title and I think subheader subtitle and we just close that tag like that so look okay so cool we have our title with subtitle now it's looking better another thing that I'd like to include is a bit of padding here so I'm gonna write style and we have some padding going to be 0.5 rem okay so this just means if we have multiple cards and they choose each other they're not going to be touching there's gonna be a bit of space between them okay so it looks that's pretty good I think we just need to include the actual button okay so buttons are a little bit different I do have an example on a car okay here we have these buttons basically what we want so let's have a look at how how that is done so we see we have this icon button so we have card actions here and then we have icon button so I'm going to copy this place it in card actions and then replace this one here you don't want that okay icon button it's going to be like open URL and for share icon I'm not going to do that I'm going to I think it's expand icon is the one I want and change this to expand icon and we want to modify this so oh sorry we need to import everything so see at the moment says cannot find name icon buttons because we haven't imported it at the top so let's let's do that so let's have a look at our example again is it this one no this example we have icon button yeah okay so and we also have a share icon so let me copy that across okay and it's launch icon I think I think I wrote expand icon yep so launch icon instead and we import that so right import launch icon from and here we're going to use the icons material that we installed in the previous video so icons material and it's launch okay so let's have a look at what that looks like now okay so we have this launch icon doesn't do anything at the moment because we don't have any URL in there I'm connected about link yet so let's do that so you need to pass that into our the icon button part here so we have correct as we did before and we just passing our link and then another thing so okay let me save that so it should run it okay so now it's going blue that goes in that form because it's an actual link I was still not opening anything we need to the reason for that is because a streamer is displaying all this through a iframe which is like an embedded web page within the web page and so it's actually opening opening it within that iframe but at the moment it's just it's not working it's just not opening anything it's just because it's kind of being I think it's being blocked by or something on those lines I'm not sure so what we want to say is we want to open it in the parent browser of that iframe to target this actual window so to do that we need to add in here I need to modify the target so target is going to be equal to underscore parent now save that and try again okay now it's working again okay cool so and there there are cards one other thing we need to just see here is the actual font is different to the mui font yeah yeah this looks a lot nicer in here that's because they're using the Roboto font now to implement that we need to remember where is on here and maybe we can search at the top okay yeah so we can we can just copy this so we need to npm install in our front-end directory this so this is going to install the Roboto font for us I'm going to open another terminal window okay navigate to the front-end directory and we need npm install okay once that has installed so switch back to here we just need to import it into our card component.tsx so we'll go to the top and it's in the right comment so import font paste that and save and now this should look a lot nicer okay so now it's definitely using the Roboto font, it looks cleaner so that's that's everything for the component I don't think there's anything else obviously in designing your own component you might want to make it more fancy and some other things in there but for this I think that's everything that I'd like to cover.

In the next video what we're going to do is have a look at how to actually set this up for distribution so other people can pick and solve your component and actually use it in their own streamer apps so that's also pretty interesting and pretty straightforward, there's not too much to do there.

The bulk of the work is what we've just done so thank you very much for watching I hope that is useful and I'll see you in the next video, bye!