From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Completing the cart UI

Completing the cart UI - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Completing the cart UI

“

Now, I will add the remove button with the delete icon inside it. So, I will navigate to the heroicons.com, will search trash, then copy the JSX code and navigate to the icons.jsx file and create components by saying export const delete icon and paste the jsx. Now creating a button, I will say button with class name !bg-red-500, wfit, display-flags-gap-to-items-center and will say delete icon and in the span I will say remove. Now let's check the output and the remove button is rendered. But I want to place the quantity section size and remove button in a row. So I will wrap them with the div and apply styles by saying class name is equal to flex justify between items center. Now let's check the output. And yes, they are placed in a row with equal spacing in between. Now I want to add equal spacing vertically. So I will add styles to the parent div of the product details section. So I will say justify between. That's it. Let's check it. And yes, the spacing is added vertically as…

Contents