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 product page

Completing product page - 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 product page

“

Now, I will add the size section where we can select one of the sizes from small, medium and large. So, I will write division class name my7 space y1 and the title h6 class name text lg font semi bold and will give the text size. Next I want to add radio buttons for selecting size and we will use the same styles and checkbox buttons which we used for filter options in the home page. But we will use input type radio instead of checkbox. So I will create a radio button by saying input type radio id sizes name sizes and class name will be hidden here. Now I will add label html for will say sizes, class name will be checkbox button label. Let me give s here. Now creating an array of objects for sizes as well. So we'll say const size options. The object will be label s, value small size, same for medium and large. And we'll map the size option by saying sizeOptions.map. Here we'll have item and index as the received values. And then let me also shift this jsx above. And I'll say key is…

Contents