1
00:00:00,000 --> 00:00:04,000
So let's continue working on

2
00:00:04,000 --> 00:00:06,000
the featured posts now,

3
00:00:06,000 --> 00:00:09,000
now that we added the navigation and so on.

4
00:00:09,000 --> 00:00:12,000
The goal of the featured posts component

5
00:00:12,000 --> 00:00:15,000
is to output some posts which we,

6
00:00:15,000 --> 00:00:18,000
as the owner of the block, marked as featured.

7
00:00:18,000 --> 00:00:20,000
Now, we will add posts

8
00:00:20,000 --> 00:00:23,000
and mark them as featured in a later step

9
00:00:23,000 --> 00:00:25,000
but we can already start

10
00:00:25,000 --> 00:00:29,000
with outputting some dummy posts here for the moment.

11
00:00:29,000 --> 00:00:31,000
Therefore, in featured posts

12
00:00:31,000 --> 00:00:35,000
I'll again create a basic component, featured posts

13
00:00:35,000 --> 00:00:38,000
and, you've guessed it, we will export it,

14
00:00:38,000 --> 00:00:40,000
like we always did.

15
00:00:40,000 --> 00:00:43,000
Now we have a featured posts module CSS file

16
00:00:43,000 --> 00:00:46,000
and we will need it so we will import classes

17
00:00:46,000 --> 00:00:51,000
from that featured posts module CSS file already.

18
00:00:52,000 --> 00:00:55,000
And then here, in that featured posts component

19
00:00:55,000 --> 00:00:58,000
I again want to create another section

20
00:00:58,000 --> 00:01:03,000
which will receive a class of latest,

21
00:01:03,000 --> 00:01:05,000
because that's one of the classes that I pre-defined

22
00:01:05,000 --> 00:01:07,000
in the CSS file.

23
00:01:07,000 --> 00:01:12,000
Then a heading for this section where I say featured posts

24
00:01:13,000 --> 00:01:18,000
and then below that a list of posts, or a grid of posts.

25
00:01:19,000 --> 00:01:22,000
And for this I'll actually create a separate component.

26
00:01:22,000 --> 00:01:24,000
Why?

27
00:01:24,000 --> 00:01:28,000
Because we will then use that same list, or grid,

28
00:01:28,000 --> 00:01:32,000
as it will actually be on the all posts page.

29
00:01:32,000 --> 00:01:36,000
On both the starting page in the featured posts component,

30
00:01:36,000 --> 00:01:39,000
as well as on the all posts page,

31
00:01:39,000 --> 00:01:43,000
I want to output posts in the same way.

32
00:01:43,000 --> 00:01:48,000
I want to render a grid of post cards, so of post items.

33
00:01:48,000 --> 00:01:50,000
I want to render those as a grid

34
00:01:50,000 --> 00:01:52,000
and these items then should be clickable

35
00:01:52,000 --> 00:01:55,000
and take us to the individual post.

36
00:01:55,000 --> 00:01:58,000
The only difference is the number of posts

37
00:01:58,000 --> 00:02:01,000
and the actual posts that are being rendered,

38
00:02:01,000 --> 00:02:05,000
but the way that they are presented will always be the same.

39
00:02:05,000 --> 00:02:08,000
Hence we can create a reusable component for that

40
00:02:08,000 --> 00:02:09,000
and that is what I will do.

41
00:02:09,000 --> 00:02:13,000
In the components folder I'll create a new sub-folder

42
00:02:13,000 --> 00:02:15,000
which I'll name posts,

43
00:02:15,000 --> 00:02:19,000
which should hold all the posts specific components.

44
00:02:19,000 --> 00:02:22,000
And we could argue that featured posts

45
00:02:22,000 --> 00:02:24,000
is also a posts specific component

46
00:02:24,000 --> 00:02:27,000
but it's even more specific to the home page

47
00:02:27,000 --> 00:02:30,000
because we only use it there,

48
00:02:30,000 --> 00:02:32,000
which is why I keep it in the home page folder.

49
00:02:33,000 --> 00:02:35,000
Now, in that posts folder

50
00:02:35,000 --> 00:02:39,000
I'll add a posts dash grid component file though

51
00:02:39,000 --> 00:02:42,000
which will then render this grid of posts.

52
00:02:42,000 --> 00:02:45,000
And now for that posts grid,

53
00:02:45,000 --> 00:02:50,000
you already find a posts grid module CSS file attached

54
00:02:50,000 --> 00:02:52,000
which we will need in a second,

55
00:02:52,000 --> 00:02:53,000
so you can download that

56
00:02:53,000 --> 00:02:58,000
and add it in the posts grid JavaScript file.

57
00:02:58,000 --> 00:03:03,000
Now you'll also find attached a post item module CSS file

58
00:03:03,000 --> 00:03:06,000
and you can download and add that as well,

59
00:03:06,000 --> 00:03:08,000
also in the posts folder

60
00:03:08,000 --> 00:03:13,000
because we will also create a post item JS file next to that

61
00:03:13,000 --> 00:03:16,000
which will hold a single post item.

62
00:03:16,000 --> 00:03:20,000
The post grid will render a couple of post items

63
00:03:20,000 --> 00:03:23,000
and I'll split the grid and the actual items

64
00:03:23,000 --> 00:03:25,000
into separate components

65
00:03:25,000 --> 00:03:28,000
to keep every component lean and maintainable.

66
00:03:28,000 --> 00:03:31,000
Let's start working on the posts grid component though.

67
00:03:31,000 --> 00:03:35,000
In that posts grid file I'll add a function,

68
00:03:35,000 --> 00:03:38,000
posts grid, which is my default component function

69
00:03:38,000 --> 00:03:42,000
which, as always, is then just exported.

70
00:03:42,000 --> 00:03:44,000
Of course, by the way,

71
00:03:44,000 --> 00:03:47,000
you could create a snippet for this in Visual Studio Code

72
00:03:47,000 --> 00:03:48,000
to save some time,

73
00:03:48,000 --> 00:03:50,000
but here I'll just write it manually all the time

74
00:03:50,000 --> 00:03:54,000
and then in the posts grid component

75
00:03:54,000 --> 00:03:56,000
we want to return to JSX code.

76
00:03:56,000 --> 00:03:58,000
That should be output here.

77
00:03:58,000 --> 00:04:02,000
Now, the JSX code is, again, very simple here.

78
00:04:02,000 --> 00:04:06,000
It will be an unordered list of posts items.

79
00:04:06,000 --> 00:04:09,000
Now the data for those posts

80
00:04:09,000 --> 00:04:12,000
should be received from outside, though.

81
00:04:12,000 --> 00:04:14,000
I do expect that I get props here

82
00:04:14,000 --> 00:04:19,000
and in my props I want to get a special posts prop.

83
00:04:22,000 --> 00:04:25,000
Now, the props name is up to you as its your component

84
00:04:25,000 --> 00:04:29,000
you just need to make sure that you then use that prop name

85
00:04:29,000 --> 00:04:32,000
for passing data into this component.

86
00:04:32,000 --> 00:04:35,000
So then I what to output my posts dynamically here

87
00:04:35,000 --> 00:04:40,000
by mapping every post into a post item

88
00:04:42,000 --> 00:04:44,000
and we have yet to add this component,

89
00:04:44,000 --> 00:04:46,000
but that's my goal here.

90
00:04:46,000 --> 00:04:48,000
I want to output a list of posts

91
00:04:48,000 --> 00:04:52,000
where I map my posts data into post item components.

92
00:04:52,000 --> 00:04:54,000
That's the goal here.

93
00:04:54,000 --> 00:04:59,000
Now, we will need to import post item for that

94
00:04:59,000 --> 00:05:02,000
from the post item file we just added

95
00:05:02,000 --> 00:05:04,000
and this file is empty right now,

96
00:05:04,000 --> 00:05:06,000
but we will work on that soon,

97
00:05:06,000 --> 00:05:08,000
and we'll also need some styling

98
00:05:08,000 --> 00:05:10,000
so I'll import some classes from

99
00:05:10,000 --> 00:05:15,000
dot slash posts grid dot module dot CSS.

100
00:05:17,000 --> 00:05:20,000
And that is that posts grid CSS file for this component

101
00:05:20,000 --> 00:05:22,000
which has a class

102
00:05:22,000 --> 00:05:25,000
which should be added to the unordered list.

103
00:05:25,000 --> 00:05:27,000
There I want to add the grid class,

104
00:05:27,000 --> 00:05:29,000
which is defined in posts grid,

105
00:05:29,000 --> 00:05:32,000
and there we use the CSS grid feature

106
00:05:32,000 --> 00:05:36,000
to render some grid columns.

107
00:05:36,000 --> 00:05:38,000
Okay, so that's that.

108
00:05:38,000 --> 00:05:41,000
Now let's work on the post item, on the post item component

109
00:05:41,000 --> 00:05:45,000
which outputs an individual item in that grid of posts.