1
00:00:02,000 --> 00:00:04,000
Let's continue working on our project here.

2
00:00:04,000 --> 00:00:07,000
And let's continue with this link.

3
00:00:07,000 --> 00:00:09,000
At the moment, it looks a bit boring.

4
00:00:09,000 --> 00:00:13,000
And I would like to have that link look like a button.

5
00:00:13,000 --> 00:00:17,000
Now, we'll also use a button in some other places

6
00:00:17,000 --> 00:00:21,000
of our project and, therefore, instead of styling it here,

7
00:00:21,000 --> 00:00:23,000
in the event item component,

8
00:00:23,000 --> 00:00:26,000
I'll add a new component, which we can then reuse,

9
00:00:26,000 --> 00:00:28,000
which I'll add in a new folder,

10
00:00:28,000 --> 00:00:31,000
which I'll name UI for user interface.

11
00:00:31,000 --> 00:00:36,000
And in there, I'll add button.js file.

12
00:00:36,000 --> 00:00:39,000
To create a button component in there,

13
00:00:39,000 --> 00:00:43,000
which sets up this button so that we have a reusable button.

14
00:00:43,000 --> 00:00:45,000
For this, in this button.js file,

15
00:00:45,000 --> 00:00:49,000
we create a button component like this.

16
00:00:49,000 --> 00:00:52,000
A functional component which we, of course, also export.

17
00:00:52,000 --> 00:00:56,000
And then, in here, I will return a link.

18
00:00:57,000 --> 00:01:01,000
And, for this, we need to import link from next/link.

19
00:01:01,000 --> 00:01:04,000
And that link should, of course, hold a text

20
00:01:04,000 --> 00:01:06,000
which is passed in from outside.

21
00:01:06,000 --> 00:01:09,000
So, between the opening and closing tags

22
00:01:09,000 --> 00:01:11,000
of our button component, hence,

23
00:01:11,000 --> 00:01:13,000
we can use props.children here.

24
00:01:14,000 --> 00:01:17,000
And, of course, it should also lead somewhere.

25
00:01:17,000 --> 00:01:22,000
And I expect to get a link prop on this button,

26
00:01:22,000 --> 00:01:24,000
which holds the actual link we wanna to go to

27
00:01:24,000 --> 00:01:29,000
and set this as a value for the ref prop here.

28
00:01:30,000 --> 00:01:32,000
Now, we got this button component,

29
00:01:32,000 --> 00:01:36,000
attached you now find this button.module.css file

30
00:01:36,000 --> 00:01:39,000
with some styles for this button.

31
00:01:39,000 --> 00:01:42,000
And, just as before, to apply them

32
00:01:42,000 --> 00:01:47,000
we now need to import classes from ./button.module.css.

33
00:01:50,000 --> 00:01:53,000
And then, to add those classes here,

34
00:01:53,000 --> 00:01:56,000
we need to actually add an element inside

35
00:01:56,000 --> 00:02:01,000
of the link component, we need to add an anchor tag element.

36
00:02:02,000 --> 00:02:04,000
And then, on this anchor tag element

37
00:02:04,000 --> 00:02:08,000
we can set the class name and set this to classes.button.

38
00:02:09,000 --> 00:02:12,000
Now, if we don't add the anchor tag,

39
00:02:12,000 --> 00:02:15,000
then the link automatically renders

40
00:02:15,000 --> 00:02:17,000
an anchor tag under the hood,

41
00:02:17,000 --> 00:02:19,000
an anchor tag, where it basically controls

42
00:02:19,000 --> 00:02:22,000
what happens when that link is clicked though,

43
00:02:22,000 --> 00:02:25,000
so that we don't send a request for a new file,

44
00:02:25,000 --> 00:02:28,000
but instead it captures that request

45
00:02:28,000 --> 00:02:32,000
and loads a new page with JavaScript only.

46
00:02:32,000 --> 00:02:34,000
But if you want to apply custom styling,

47
00:02:34,000 --> 00:02:38,000
then you need to add that anchor tag on your own.

48
00:02:38,000 --> 00:02:41,000
And the link component will basically detect

49
00:02:41,000 --> 00:02:44,000
that there now is a anchor tag inside of it,

50
00:02:44,000 --> 00:02:47,000
and it will no longer render its own anchor tag

51
00:02:47,000 --> 00:02:49,000
but instead render yours,

52
00:02:49,000 --> 00:02:52,000
but then add all that functionality

53
00:02:52,000 --> 00:02:57,000
where it captures clicks on that link and so on for you.

54
00:02:57,000 --> 00:03:00,000
So, it will add that functionality, that all works.

55
00:03:00,000 --> 00:03:03,000
We just add our own anchor tag to add classes.

56
00:03:03,000 --> 00:03:06,000
We don't, and that's important,

57
00:03:06,000 --> 00:03:11,000
we don't set the ref attribute on this anchor tag though,

58
00:03:11,000 --> 00:03:14,000
as I just said, that will be added automatically

59
00:03:14,000 --> 00:03:17,000
by the link component, which is right wrapped around that.

60
00:03:17,000 --> 00:03:20,000
So, we just set it up like this.

61
00:03:20,000 --> 00:03:22,000
And, now, we can use this button component

62
00:03:22,000 --> 00:03:24,000
in the event item component.

63
00:03:24,000 --> 00:03:29,000
Here, instead of this link, we can now use our own button.

64
00:03:30,000 --> 00:03:34,000
And, of course, for that make sure you also import button

65
00:03:34,000 --> 00:03:38,000
from the UI folder, and the button file.

66
00:03:39,000 --> 00:03:44,000
And then, here, we can still say explore event.

67
00:03:44,000 --> 00:03:47,000
And, now, we set the link prop on the button component

68
00:03:47,000 --> 00:03:49,000
because that's what I'm expecting here,

69
00:03:49,000 --> 00:03:54,000
I'm expecting a link prop and I set this here equal

70
00:03:54,000 --> 00:03:59,000
to the explorer link, just as before.

71
00:03:59,000 --> 00:04:00,000
And of course this button, technically,

72
00:04:00,000 --> 00:04:02,000
now isn't a button but a link,

73
00:04:02,000 --> 00:04:05,000
but it will look like a button, hence the component name.

74
00:04:07,000 --> 00:04:08,000
If you now save all files,

75
00:04:08,000 --> 00:04:10,000
you should have this button look here.

76
00:04:11,000 --> 00:04:15,000
Now, adding a button was one important thing.

77
00:04:15,000 --> 00:04:18,000
I also want to add a couple of icons to ensure

78
00:04:18,000 --> 00:04:21,000
that the event items we're rendering look a bit nicer.

79
00:04:22,000 --> 00:04:25,000
For this, I prepared some icons for you,

80
00:04:25,000 --> 00:04:28,000
some icon components, which you'll find attached.

81
00:04:28,000 --> 00:04:32,000
To be precise, attached you find an icons ZIP file,

82
00:04:32,000 --> 00:04:36,000
which you can extract into your components folder,

83
00:04:36,000 --> 00:04:39,000
so that you end up with a third folder

84
00:04:39,000 --> 00:04:42,000
in the components folder, this icons folder,

85
00:04:42,000 --> 00:04:45,000
which holds free JavaScript files,

86
00:04:45,000 --> 00:04:48,000
which hold react component functions,

87
00:04:48,000 --> 00:04:50,000
which return SVG icons.

88
00:04:50,000 --> 00:04:53,000
Now, these icons are not created by me.

89
00:04:53,000 --> 00:04:55,000
I'm just sharing them with you,

90
00:04:55,000 --> 00:04:58,000
so that we don't have to write that code together.

91
00:04:58,000 --> 00:05:02,000
Instead, these are icons from heroicons.com.

92
00:05:02,000 --> 00:05:07,000
Here, I picked this location marker icon,

93
00:05:07,000 --> 00:05:12,000
I picked the calendar icon, and this arrow right icon.

94
00:05:12,000 --> 00:05:16,000
These icons are taken from heroicons.com

95
00:05:16,000 --> 00:05:19,000
and I just pre-created these components for you,

96
00:05:19,000 --> 00:05:21,000
so that we don't have to write all that code together.

97
00:05:22,000 --> 00:05:26,000
But I just copied the JSX code from heroicons.com.

98
00:05:26,000 --> 00:05:30,000
It's super easy to do, you even get a button for that here.

99
00:05:30,000 --> 00:05:32,000
And I created these components.

100
00:05:33,000 --> 00:05:36,000
Now, with these components added, we can go back

101
00:05:36,000 --> 00:05:40,000
to event-item.js and, there, I now got a couple

102
00:05:40,000 --> 00:05:44,000
of places where these icons should be inserted.

103
00:05:44,000 --> 00:05:47,000
For example, here, in front of the time.

104
00:05:47,000 --> 00:05:52,000
There, I want to render the date icon, so I'll add it here

105
00:05:53,000 --> 00:05:55,000
and we, now, need to import it.

106
00:05:55,000 --> 00:05:59,000
We need to import DateIcon from

107
00:05:59,000 --> 00:06:04,000
and then go up one level into icons/date-icon, like this.

108
00:06:05,000 --> 00:06:08,000
We can now also remove link import, by the way,

109
00:06:08,000 --> 00:06:10,000
since we're not using the link component

110
00:06:10,000 --> 00:06:12,000
in this component anymore.

111
00:06:13,000 --> 00:06:15,000
So, that's the date icon added.

112
00:06:15,000 --> 00:06:20,000
Above the address, I wanna add the address icon, like this.

113
00:06:21,000 --> 00:06:24,000
And for that, you, of course, also need

114
00:06:24,000 --> 00:06:26,000
to add the appropriate import,

115
00:06:27,000 --> 00:06:31,000
and we can also already import the ArrowRightIcon

116
00:06:32,000 --> 00:06:37,000
from /icons/arrow-right-icon,

117
00:06:38,000 --> 00:06:40,000
because I will render that in my button.

118
00:06:42,000 --> 00:06:44,000
Here in this button, I don't just want

119
00:06:44,000 --> 00:06:47,000
to have this explore event text.

120
00:06:47,000 --> 00:06:52,000
Instead, this text should sit side by side to an icon.

121
00:06:52,000 --> 00:06:55,000
Hence, I'll wrap this text in a span

122
00:06:55,000 --> 00:06:58,000
and then add another span here.

123
00:07:01,000 --> 00:07:05,000
And in that second span I'll render this ArrowRightIcon,

124
00:07:06,000 --> 00:07:11,000
which I just imported, and this second span important

125
00:07:11,000 --> 00:07:16,000
also receives a class, it receives the icon class, like this

126
00:07:18,000 --> 00:07:22,000
Again, if you save all files and you go back

127
00:07:22,000 --> 00:07:24,000
you now should see these icons

128
00:07:24,000 --> 00:07:29,000
as part of these event cards here.

129
00:07:29,000 --> 00:07:33,000
And that is, now, the final look of the event items.

130
00:07:33,000 --> 00:07:36,000
We spent quite some time on them, but we will use them

131
00:07:36,000 --> 00:07:39,000
in a lot of different places of this application.

132
00:07:39,000 --> 00:07:40,000
And therefore, that is, of course,

133
00:07:40,000 --> 00:07:43,000
something which I did want to make look good.

134
00:07:44,000 --> 00:07:46,000
Now, let's work on the other pages

135
00:07:46,000 --> 00:07:50,000
because, thus far, we never left the starting page.

136
00:07:50,000 --> 00:07:53,000
And we got more pages, for example,

137
00:07:53,000 --> 00:07:56,000
we got the page for a single event

138
00:07:56,000 --> 00:07:59,000
and we can reach that page for a given event ID,

139
00:07:59,000 --> 00:08:03,000
if we click those buttons, the explore event buttons.

140
00:08:03,000 --> 00:08:08,000
That sets the URL to /events/ID and loads

141
00:08:08,000 --> 00:08:12,000
the event detail page, so time to work on that.

142
00:08:12,000 --> 00:08:14,000
And, of course, feel free to start working

143
00:08:14,000 --> 00:08:18,000
on that on your own, output some event data there.

144
00:08:18,000 --> 00:08:20,000
In the next lecture, we're going to work on it together.

145
00:08:20,000 --> 00:08:22,000
And we're then, also going to add

146
00:08:22,000 --> 00:08:24,000
some styles together, of course.