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.