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.

Creating switch component

Creating switch component - 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

Creating switch component

“

Let me create a switch.jsx file inside the UI folder of components folder and inside it I will create the component will give switch as text and export it. Now I'll copy the JSX code of the checkbox from the add product component and paste it here. And inside the ad product component, I will import switch from the components and use it in place of the checkbox. Let's save the code and check the browser. You will see the checkbox rendered from the switch component. Now I'll go to the switch component and wrap it with the label tag and apply styles by writing display inline flex, align items center, cursor pointer, and width fit content. Let me save the code and check the output. You will observe the size of the checkbox is decreased and placed on the left side. Now I will create a track of the switch. So I will add a self-closing tag below the input tag and apply styles by saying position relative, width 16, height 8, background gray 200 and rounded full. We'll also add style for…

Contents