Chakra UI Crash Course #7 - Card Component

Key Takeaways

all right there my friends so now we have the basic layout up and running next I want to take a look at the card components so pretty much every UI library has their own variation of a card component and chakra UI is no exception to that rule so here on the docs you can see we have this component and if you scroll down you're going to see all the different types of content we can place inside a card so we can have card headers we can have images inside a card a card body card photos Etc now on our site I want to change the grid of squares on the dashboard that we have to be a grid of tasks where each task is going to be inside its own card component so to do this I'll be fetching a little bit of data from a Json file that I've already set up inside a data folder now this Json file is on the course file so you don't have to type it all out yourself you can just grab it from GitHub remember the link to that is down below so if we take a look at that file we can see that we have a bunch of Json objects where each object is a task and each task has a unique ID a title a description an author and an image URL now that image URL is a path to an image inside the public folder and it represents the image of whatever author created that task the idea being that eventually we're going to add little avatars to each card as well but the first step is to fetch this data and to do that we'll be using Json server to spin up a Dev server and generate an endpoint for this Json resource or this task resource rather inside the Json file so in order to do this you'll need Json server installed which you can do by going to a terminal and typing npm install hyphen J so it's installed globally on your computer and then Json hyphen server so once you've pressed enter to install that we can then use Json server to watch that Json file by typing Json hyphen server then hyphen W to watch a file and then we need a path to the file which is dot forward slash data to go into the data folder and then forward slash db.json which is the file name and then press enter and we should get back an end point at which we can reach the tasks data or the tasks resource inside the terminal so now we can use the endpoint to fetch the data for the dashboard component so the way we're going to fetch that data inside this component is by using a loader now a loader function is something new to one of the later versions of react router Dom you don't need to use this you could use a use effect hook inside this component and fetch it inside that I'm going to use a loader and if you want to learn more about loaders and how they work with react router Dom definitely check out my react router in-depth course the link to that is down below anyway to create a loader we just need to export a function from this component which is where we're fetching the data from so I'm going to export a const called tasks loader we set that equal to an async function and inside that function all we need to do is fetch that resource so we say const response is equal to a weight Fetch and then we can paste in the end point which was localhost 3000 forward slash tasks remember we have to have Json server running to grab those tasks okay so we await that and we have the response and all we need to do is return the response.json and when we do that we can access that data inside this component and the way we do it is by using a hook from react router Dom so we can say const tasks is equal to use loader data I'm going to click on that to Auto Import it from react router Dom and that grabs us the data from this particular thing right here now at the minute that won't work because we've not registered the loader for this component yes we have that function and yes we export it but we need to register a loader with this component and to do that we have to go to the app component where we have our routes and it's for the index route the dashboard all we need to do is tack on a loader prop right here and specify what function should be used for the loader for this component now that function was this one that we exported tasks loader so we just type in tasks loader click on that so it Imports it from that particular page or that particular file and then we can save it so now when we visit this route then react is going to lock at this particular loader function it's going to fire that function and it's going to fetch the data and since we return that data right here that's what we get back when we use this hook use load of data so now we have the tasks and we can use those tasks inside this component now what I'm going to do is get rid of all of these boxes right here because we want to Output now each task not just a box now before we start playing around with cards let me first of all get rid of this padding right here we don't really need that anymore and I'm going to change this Min width to be 300 pixels instead so they're a little bit wider each card so each card is essentially an item in this simple grid now we need to map through the tasks so let's say tasks and double Ampersand and then tasks dot map now the reason I do this is to check we have tasks before we try to map through them so for each one we fire a function and we get access to that task and we can return some template for each task now all I'm going to do for now is just return a div for each one and output a task title so remember the title was a property on each task this thing right here and we're going to use the ID as the key for the div so task dot ID so fingers crossed this should work I'm going to save that and come to the browser and now you can see we're cycling through the different tasks that we Fetch and they're being output in the grid now it looks terrible but we are going to create a card component now instead of this little div right here so let's delete that and instead use the card components so then let's say card and you want to click on this to Auto Import it up here now remember we need a key prop on whatever the parent element is inside this function that we're returning so let's say key is equal to the task dot ID so we can pass this key prop through to these components that chakra provides us okay so after that I also want to apply a few styles to each card and in fact we won't do that just now we'll output the card and see the default Styles then we'll start to customize it so there's different things we can have inside a card right we can have a card header a card body we can also have a card footer so let's do each one of those let's do a card header first I'm going to click on this to import it and inside the card header we might have I don't know something like a title we'll come back to it in a second we're also going to have a card body so card body click on that to import it and inside the card body we might have a little bit of text and then also we'll have a card footer these all components click on that to import it and inside the card footer we might have a couple of buttons or a like icon or something like that okay so let me just do any old text in here we'll just do a text component and say card header and then I'm going to copy that and I will paste it down here in the body and then I will paste it again inside the footer just so we can see what these look like if we go to the browser okay so we can see these cards and you might not see it very well on the screen but you should see a subtle Shadow all the way around it soft Corners so that is the card component and we have a card header we have the body and the footer they all say header but three different places in the card right so now we actually want to replace these things with actual content so then let me get rid of all those and I'm going to start with the card body so I just want to Output the description we have a description property right here so let me do a text component and inside that we want to Output the card not description now it's going to be black text oops not card it should be task description cannot type okay so this is black text right here I want to make it light gray so we can either do that using the text component or the card body so let's do the card body we'll say color is equal to Gray and then dot 500 so it's like a medium Gray save that and that looks a little nicer and that's all I want for the card body next I'm going to do the card header now this is a little bit more complex because what I want eventually is to have a little avatar on the left and then on the right I want to have a heading and also the auth under the heading so to do this we're going to use the flex component so we can see the avatar on the left and then the other stuff on the right in the heading so let's do a flex component and import that and inside here we want a box and this is going to be for the Avatar later on now I'm going to give this a width of 50 pixels and also a height of 50 pixels and this is just a placeholder for now for the Avatar since we've not covered that component we'll replace it later on with the avatar for now let's just do some text inside here with AV which stands for Avatar okay so that's going to sit on the left on the right I want another box and that box inside it is going to have the heading the title so let's do a heading component and we'll say the task title is going to be output there as style props I want to say in fact we'll just say as and set that equal to an H3 because the default one is an H2 and then also I want to set the size of this to be small so this is a built-in size for chakra it's just small text okay that will do and then below that we'll have a text component and the text component is going to be for the author so we'll say bye and then in curly braces task dot author all right so now oops I should just be task now in the header we're going to have this on the left and then this on the right so let's save it and preview okay we get an error heading is not defined of course it's not because we need to import it so let's do that heading like so save it and now that should work all right looking okay so we have the title the author and then later on this is going to be a little Avatar as well plus we have the description in the card body all right cool so now adjust the card footer and what I'd like to do is two buttons and they're going to be some kind of maybe view icon and also an edit icon so let's go back over here and come to the card footer and inside here we're going to do a horizontal stack remember this allows us a little bit like Flex over here to put two things or three things next to each other so we don't need all the flexibility of this Flex component and in fact what I'm going to do is just apply a bit of a gap to that just so there's a bit more space if I save that okay hdac is not defined really need to keep on top of this save it now we can see a little bit more of a gap between those two anyway let's get back to the H stack that's a little bit like the flex component so it's going to sit different items next to each other inside here and the two items I want are going to be button components so click on that to import it so the first one right here and I'm going to say watch as if we're watching that particular task a bit like you can watch a GitHub repo and then we'll do another button down here and this is going to say comment so leave a comment now I also want to apply an icon to each button if I just save it right now we can see we have those two buttons however it would be nice if there was an icon on the left of each one of those so to do that we can use a prop called Left icon and we can set that equal to some kind of Icon so let me do that for both of these buttons and remember we covered icons in an earlier lecture all we need to do is import whatever icons we want to use now when we use a button we have to Output the icon as a component whereas before in the sidebar when we used a list icon we didn't okay but that's because this is a component and we're actually using a left icon prop and we're passing in a component okay so we're going to use the view icon for this click on this to import it make sure it does up here yeah and let me close this same down here but this time we're going to have the edit icon like so all right save that and if we take a look we should have those two icons cool now you can also pass a variant prop into different components and buttons are one of those components so I could say right here variance and set that equal to a variant of the button now one of those variants is Ghost so let me save it just using that one as a go so we can see the difference and you can see how that doesn't have a background but when we hover over it does and that's the kind of button I'd like for both of these so let's also add that variant to this one so variant is equal to ghost like so save that and preview and that's looking pretty nice all right cool so there's one more thing I'd like to do and that's just to add a divider between the body and the footer and we can do that using a divider components so divider like so make sure it Imports at the top and then down here you can just close it I'm also going to add a border color to this just to color it and the color is going to be Gray 200 so a pretty light gray save it and preview and that looks a lot better to me awesome so there we go my friends we have now these different card components looking pretty nice later on we'll finish them by adding these avatars over here I think for now what I'd like to do is just go back to the card component itself and just add a few Styles so let me go to the card component over here I'm going to apply a border hyphen top which is colorized and also in fact let's set the oops not hyphen top it should become a case let's set the width of the border to be 8 pixels and we'll set the Border color and that's going to be purple 400 and the background was set to be white because at the minute I think it's gray yeah and that should be white just so they stand out a little bit save that all right so they look a little nicer awesome okay so I would actually like them to sit a little further down from this nav bar right here so what we could do is we could find the nav bar itself and we could add a margin bottom so let's do that margin bottom and set that equal to 40 pixels see what that looks like save it and preview and that looks a bit better awesome okay then my friends so there is the card component there's loads of different things you can do with it just check out the documentation you can see we can add all these different kind of things so uh yeah in the next lesson what we're going to do is we're going to take a look at the tabs component and we're going to add that onto the profile page