Shadcn UI Crash Course #2 - Card Components

okay then so now we've got a next JS app up and running and we've set up a bit of config for shard TN UI now we can start adding some different components now to begin with I want to take a look at the card component but before we do that I just want to go through a little bit of prep work so what I'd like to do is fetch some data for some recipes and then we'll display each one of those recipes on this page inside a card component and the recipe data we're going to fetch is stored inside a data folder I've already created inside a db. Json file so inside this file we've got nine recipe objects in total each one with a different ID a title an image path a Time property a description and a vegan flag to say whether or not the recipe is vegan now we're going to fetch all this data using Jason's server which you can install globally by typing npm install then a hyphen G to install it glob and then Json hyphen server once you've done that we can then use it to tell it to serve up our data by typing Jason hyen server and then the watch flag so double- watch then a path to the file we want to watch which isore data and then a for SL again and then db. Json and then after that another flag double-port to say we want to run this on Port 4,000 because react or rather nextjs is using Port 3000 and what this does is wrap the data in an API and it serves it on Port 4,000 for us so we can fetch it using this end point that it generates right here so that's how we're going to fetch the data that we need next up we want to fetch the data inside the homepage so first I'm going to paste in a new interface which describes that data so we can get some autoc completion going and the properties here match the Json data exactly next I'm going to paste in a function to fetch the data called get recipes which fetches that data that Json data and it returns it and we can see that return type here where we say it returns a promise that when resolved will be an array of recipes so now we can use that recipe data in the component Itself by first of all marking the component as an async component so we can use a weight inside it and then within it we can invoke that get recipes function and store the recipes inside this recipes constant so now we can iterate those recipes inside the component and we can output some template for each one to do that I'll make a div to begin with with some Tailwind classes so the first one is grid to set the display to grid then grid hyphen cols hyphen 3 to make a grid of three columns in total and then Gap hyphen 8 to apply a gap between the grid items so inside the div I'll take the recipes and we then what to map through them so for each recipe we're going to fire a function and for each recipe we return a little bit of template and this is where we're going to Output a card component using Sharden all right so if we come to the docs now and then go to components and then scroll down here we should see the card component so it gives us an example of what the card looks like we can togg all the different styles here as well they're not too different to be honest but if we scroll down we can see right here this is how we add the card component to our project so we use this Shard Cen UI CLI again and we're just using this add command and then whatever component we want to add so I'm going to copy that but then if we scroll down here you can see all the different things that we can import from the card component so the card itself card content card description card footer Etc so these are all the components we're going to use and this is basically how we're going to structure it so we have the card then inside that header inside that title potentially a description as well we have the card content and a footer so let's go back up here I think I already copied it but let's do it again for good measure and now we can go and add this card component in our project all right then so let's open up a terminal and go to a new terminal yep because we need those two and then we'll just paste in that command so npx Shard CN UI at latest add card and when we run this it's going to create that component for us and it's going to pop it inside the components folder that it created for us when we first set up the application so you can see right here it's done now it's created a UI folder inside here and it's put in a card. TSX file so this is the card component and if we scroll down here you can see here's all the exports so this is what we can Import in our components from the card component all right so let's go back over here and let's start to flesh out this card component so the first thing we want to do is import a load of different things from that file so I'm going to just paste those in right at the top up here and I'm basically importing all of the things because we're going to use all of them and then down here we will do our card component now we need to give this a key prop because when we're mapping through some things we need to give each element that we output each parent element a unique key so the key is going to be equal to the recipe ID because each one of these things has a unique ID all right so that's the card itself now we are going to apply some classes to this and we can do this to different components generated by Sharden we can apply classes Tailwind classes to it to kind of override some of the default Styles if you like in fact we'll do that later on let's just focus on making the component then we'll add the extra Styles all right so inside here we will have a card header component and inside the card header is where we put the card title and the card description now what I'm going to do is place these inside a div and this is a stylistic choice so that later on we can display this as flex and there might be something else after the div so that's purely stylistic you don't have to do this so we'll do the card title inside here and the card title is going to be the recipe title so recipe. tile and then below that we'll do a card description so the card description is basically like a really small amount of text below the title but before the main body of the card so the card description inside that I want to Output the length of time it takes to cook so we'll say recipe do time and then I'll put Min to cook after it all right so that might be like 30 minut to cook or something so that's the card header for now next we'll do card contents so card content like so and this is the main content of the card so I want to put the description right here inside that let's do a P tag for it and then say recipe. description okay and that will do for the card content finally I'm going to do a card footer so card footer and then inside that I'm going to Output two things first of all just a button and that button is going to say something like view recipe so in a real application I'll probably send this to a re Details page or something like that and then below the button I'm going to Output a message to say whether this recipe is vegan or not using this vegan flag so we're going to basically conditionally output a message if it is vegan if this is true so to do that we will say recipe. Vegan and then double Amper sand and then a P tag and then inside that P tag we will say Vegan so now this on the right is only going to be output if this is true so we have a little P tag that says yeah this is vegan all right awesome and that is the card pretty much complete so now we've used all of these different parts of the component we have the card wrapping everything then a card header inside that card title and description then the card content and then finally a card footer so let's preview this now in a browser all right and there we have it all these different cards each one with a different recipe so we have the card header at the top with the title and description this is the description then we have the card content and then at the we have the card footer and inside the card footer we have vegan in just some of them which are vegan awesome now a few minutes ago I said that we could apply our own Tailwind classes to these components and Sharden allows us to do that and all it does is kind of override the Styles a bit or add to the Styles so what I'd like to do is just add a few simple styles for the layout really and that is to make it so that all these buttons these view recipe buttons all sit at the bottom you see this one here is higher than this one and that's purely because the content here is a bit longer than this so I'm just going to add a few Tailwind classes to kind of Rectify this all right then so the first thing I'm going to do is come to the card itself and apply some classes to this so class name is equal to something and I'm going to paste these in so flex and then Flex call specifies the direction of the flex to be in the column Direction up and down instead of left and right and then justify between so what that's going to do is take the header the content and the footer and basically put equal space between them and that means that the but are all going to go to the very bottom of the card so they'll all be level from card to card all right so the next thing I'm going to do is apply some classes to the card header so let me just paste these in and we have Flex row right here to specify the direction of flex is now the row Gap four and then items center now this is really styles for later on because later we're going to put an avatar right here probably in the next lesson so it styles for that up against this div and then finally I also want to apply some classes to the card footer down here so let me paste those in as well so we have flex and then justify between and that's because we have then the button on the right then this will scoot way over sorry this is on the left this should scoot way over to the right so let's save this and see if it looks any better all right and now if I refresh over here hopefully y we can see now the buttons are all the bottoms all level with each other and also this thing the vegan thing's gone way over to the right as well so that looks a bit better cool so looking pretty nice that's our first component the card component in the next lesson we're going to try using some more components we're going to use the Avatar component for a little image of each recipe we're going to use the button component to make this look better and also a badge component for this thing over here

Channel: Net Ninja

Views: 28,094

Keywords: shadcn, shadcn crash course, shadcn ui, shadcn tutorial, shadcn ui crash course, shadcn ui tutorial, shadcnui, shad cn, shadcdn, shad cdn, crash course, tutorial, react ui, next.js ui

Id: sXrwh4I229Q

Length: 10min 46sec (646 seconds)

Published: Tue Oct 31 2023