From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Unlock this course with a free trial

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

Checkout steps component

Checkout steps component - Next.js Tutorial

From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Start my 1-month free trial Buy for my team

Checkout steps component

“

Now we're going to create our checkout steps component, and we're going to have it in multiple pages So let's just create a file in shared, and we're going to call it checkout dash steps dot TSX And let's do SFC and call it checkout Steps now checkout steps is going to take in a value of current Because we need to know What the the current step is is it the card is it is it shipping is it? Payment method or what and it's going to start with a zero index, and I want it to start at zero so I'm going to set that to zero as a default and then let's Return and we'll start to just add some some markup in here, so we're going to have div and Let's add some classes on to that so class name. We're going to do flex dash between And then let's do flex-call, close the sidebar up, and then space-x2, so some space on the x-axis and on the y-axis, we'll do y2 as well, and then margin-bottom 10. Now I actually want to have flex-row on medium screens and higher, so let's say md-colon and then…

Contents