All language subtitles for 008 Adding Buttons & Icons_Downloadly.ir_en

Let's continue working on our project here.

And let's continue with this link.

At the moment, it looks a bit boring.

And I would like to have that link look like a button.

Now, we'll also use a button in some other places

of our project and, therefore, instead of styling it here,

in the event item component,

I'll add a new component, which we can then reuse,

which I'll add in a new folder,

which I'll name UI for user interface.

And in there, I'll add button.js file.

To create a button component in there,

which sets up this button so that we have a reusable button.

For this, in this button.js file,

we create a button component like this.

A functional component which we, of course, also export.

And then, in here, I will return a link.

And, for this, we need to import link from next/link.

And that link should, of course, hold a text

which is passed in from outside.

So, between the opening and closing tags

of our button component, hence,

we can use props.children here.

And, of course, it should also lead somewhere.

And I expect to get a link prop on this button,

which holds the actual link we wanna to go to

and set this as a value for the ref prop here.

Now, we got this button component,

attached you now find this button.module.css file

with some styles for this button.

And, just as before, to apply them

we now need to import classes from ./button.module.css.

And then, to add those classes here,

we need to actually add an element inside

of the link component, we need to add an anchor tag element.

And then, on this anchor tag element

we can set the class name and set this to classes.button.

Now, if we don't add the anchor tag,

then the link automatically renders

an anchor tag under the hood,

an anchor tag, where it basically controls

what happens when that link is clicked though,

so that we don't send a request for a new file,

but instead it captures that request

and loads a new page with JavaScript only.

But if you want to apply custom styling,

then you need to add that anchor tag on your own.

And the link component will basically detect

that there now is a anchor tag inside of it,

and it will no longer render its own anchor tag

but instead render yours,

but then add all that functionality

where it captures clicks on that link and so on for you.

So, it will add that functionality, that all works.

We just add our own anchor tag to add classes.

We don't, and that's important,

we don't set the ref attribute on this anchor tag though,

as I just said, that will be added automatically

by the link component, which is right wrapped around that.

So, we just set it up like this.

And, now, we can use this button component

in the event item component.

Here, instead of this link, we can now use our own button.

And, of course, for that make sure you also import button

from the UI folder, and the button file.

And then, here, we can still say explore event.

And, now, we set the link prop on the button component

because that's what I'm expecting here,

I'm expecting a link prop and I set this here equal

to the explorer link, just as before.

And of course this button, technically,

now isn't a button but a link,

but it will look like a button, hence the component name.

If you now save all files,

you should have this button look here.

Now, adding a button was one important thing.

I also want to add a couple of icons to ensure

that the event items we're rendering look a bit nicer.

For this, I prepared some icons for you,

some icon components, which you'll find attached.

To be precise, attached you find an icons ZIP file,

which you can extract into your components folder,

so that you end up with a third folder

in the components folder, this icons folder,

which holds free JavaScript files,

which hold react component functions,

which return SVG icons.

Now, these icons are not created by me.

I'm just sharing them with you,

so that we don't have to write that code together.

Instead, these are icons from heroicons.com.

Here, I picked this location marker icon,

I picked the calendar icon, and this arrow right icon.

These icons are taken from heroicons.com

and I just pre-created these components for you,

so that we don't have to write all that code together.

But I just copied the JSX code from heroicons.com.

It's super easy to do, you even get a button for that here.

And I created these components.

Now, with these components added, we can go back

to event-item.js and, there, I now got a couple

of places where these icons should be inserted.

For example, here, in front of the time.

There, I want to render the date icon, so I'll add it here

and we, now, need to import it.

We need to import DateIcon from

and then go up one level into icons/date-icon, like this.

We can now also remove link import, by the way,

since we're not using the link component

in this component anymore.

So, that's the date icon added.

Above the address, I wanna add the address icon, like this.

And for that, you, of course, also need

to add the appropriate import,

and we can also already import the ArrowRightIcon

from /icons/arrow-right-icon,

because I will render that in my button.

Here in this button, I don't just want

to have this explore event text.

Instead, this text should sit side by side to an icon.

Hence, I'll wrap this text in a span

and then add another span here.

And in that second span I'll render this ArrowRightIcon,

which I just imported, and this second span important

also receives a class, it receives the icon class, like this

Again, if you save all files and you go back

you now should see these icons

as part of these event cards here.

And that is, now, the final look of the event items.

We spent quite some time on them, but we will use them

in a lot of different places of this application.

And therefore, that is, of course,

something which I did want to make look good.

Now, let's work on the other pages

because, thus far, we never left the starting page.

And we got more pages, for example,

we got the page for a single event

and we can reach that page for a given event ID,

if we click those buttons, the explore event buttons.

That sets the URL to /events/ID and loads

the event detail page, so time to work on that.

And, of course, feel free to start working

on that on your own, output some event data there.

In the next lecture, we're going to work on it together.

And we're then, also going to add

some styles together, of course.