This video is available to students only

Designing Basket Page

In this lesson, we're going to design Basket page

Designing Basket page#

We just created the skeleton of our Basket page. Let's make it look better now. This time, we will make use of the antdesign framework. We can go to the antd website and pick the best one for us. Antdesign gives us Table component which is very straightforward to use. I want our basket to be something like this. We can simply copy the code and paste it in our BasketPage.tsx file. But first of all, we want to shape the columns as per our requirements.

Let's start with Image. Our title will be capital I. In data index and key, it will be lower case. By putting image here, we are telling our column to pick the property with this name. We can also render the elements as per our wish so I can render an img tag here. We can name the image parameter, url, which will be of type string. Let's return the img tag with src and alt to be url. Let's also give the width a value of 100px. Likewise, we need title, price, and instructor. Action will stay same. We can use our div here and inside, we can use a trash icon. For that, we will import faIcons, and we want to use FaIcons.trash. Inside render, we will have access to our item which will be of type Course, then we will use it to remove the course from the cart.

So these are the columns. We also need dataSource. We can instead use items.items which has all our column properties. Let's wrap the table component with a div basket-page, then we can create a header which will say "Shopping cart". Let's create a sass file basket inside pages. I will give it display: flex and flex-direction: column. Padding can be 50px 20px, max-width can be 1340 pixels and some margin can be given. Our header will have font-size of 3 em and font-weight: bold. Let's also import it to our main.scss file.


Start a new discussion. All notification go to the author.