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.

Icon boxes component

Icon boxes 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

Icon boxes component

“

So in this video, we're just going to create a very simple icon boxes component that will show some icons and some common things you might see on an e-commerce site, like free shipping, money back guarantee, et cetera. So very simple. So let's go into just right in the components folder, and we'll create a file here called icon-boxes.tsx, and say SFC, call it icon boxes. And we're not going to pass anything in. This is going to be very simple. We are going to be using a card from ShadCN and some icons from Lucid React. So let's add our card component. Just go ahead and bring that in from UI card. And same thing with card content. So bring that in. And then I'm going to add some classes on this. I want it to be a grid. And I want it to, on medium screens, have four columns. So grid calls dash 4. And let's add some spacing with a gap 4 and padding 4. And then in the card content, we'll have a div with, let's say, space dash y dash 2. And in that, we'll have our first icon, which is…

Contents