1 00:00:02,000 --> 00:00:05,000 In this PostItem component, 2 00:00:05,000 --> 00:00:08,000 or in this file we again create our component function 3 00:00:08,000 --> 00:00:12,000 and as always export that of course. 4 00:00:12,000 --> 00:00:15,000 And then we define the structure, 5 00:00:15,000 --> 00:00:17,000 the markup of a single PostItem. 6 00:00:18,000 --> 00:00:21,000 And for me a PostItem will be a list item 7 00:00:21,000 --> 00:00:24,000 which should make sense because we're in an unordered list. 8 00:00:24,000 --> 00:00:28,000 So having a list item is a good choice typically 9 00:00:29,000 --> 00:00:33,000 and then the entire item should be clickable. 10 00:00:33,000 --> 00:00:38,000 Therefore I'll import link from next/link 11 00:00:38,000 --> 00:00:40,000 because of course I wanna use this link 12 00:00:40,000 --> 00:00:42,000 to still stay in the single page application 13 00:00:42,000 --> 00:00:45,000 use pre-fetching and all those things. 14 00:00:45,000 --> 00:00:50,000 And I'll then add a link here with a anchor tag inside 15 00:00:51,000 --> 00:00:55,000 since I'll have a more complex HTML structure in that link. 16 00:00:55,000 --> 00:00:57,000 And as I mentioned a couple of minutes ago 17 00:00:57,000 --> 00:00:59,000 you then need to bring your own anchor tag 18 00:00:59,000 --> 00:01:04,000 to tell link that it should still render anchor tag. 19 00:01:04,000 --> 00:01:08,000 And then regarding that more complex structure in here 20 00:01:08,000 --> 00:01:13,000 I wanna have a div which will hold a post-image 21 00:01:13,000 --> 00:01:17,000 which has at the top of this postcard and below that 22 00:01:17,000 --> 00:01:19,000 another div which will hold the content, 23 00:01:19,000 --> 00:01:22,000 the title, the date, and a short excerpt, 24 00:01:22,000 --> 00:01:23,000 which we wanna show. 25 00:01:25,000 --> 00:01:28,000 Now inside that first div idea for output my image. 26 00:01:28,000 --> 00:01:32,000 And we will soon add the source and everything else. 27 00:01:32,000 --> 00:01:34,000 And then the second div here 28 00:01:34,000 --> 00:01:39,000 they're all add a h3 tag with the title of the post. 29 00:01:39,000 --> 00:01:43,000 Then a time element, which outputs the time 30 00:01:43,000 --> 00:01:48,000 something like July 13th, 2022 31 00:01:48,000 --> 00:01:50,000 something like that will be output here. 32 00:01:50,000 --> 00:01:54,000 And then a paragraph with the expert text of that post. 33 00:01:56,000 --> 00:01:59,000 And of course at the moment it's just dummy data 34 00:01:59,000 --> 00:02:02,000 soon it will be actual data. 35 00:02:03,000 --> 00:02:05,000 Now, before we continue on the data, 36 00:02:05,000 --> 00:02:09,000 let's continue with the styling actually 37 00:02:09,000 --> 00:02:12,000 for this again I will again import classes 38 00:02:12,000 --> 00:02:16,000 from that PostItem.module.css file 39 00:02:16,000 --> 00:02:20,000 which I provided to you in the last lecture. 40 00:02:20,000 --> 00:02:24,000 And then we add a class to the list item, the post-class. 41 00:02:24,000 --> 00:02:27,000 We also add a class to the div, which wraps the image. 42 00:02:27,000 --> 00:02:29,000 It's the image class. 43 00:02:30,000 --> 00:02:34,000 And we add a class to this div which wraps the content. 44 00:02:34,000 --> 00:02:36,000 It's the content class. 45 00:02:38,000 --> 00:02:40,000 Now let's work on the data. 46 00:02:40,000 --> 00:02:42,000 The data for a single PostItem of course 47 00:02:42,000 --> 00:02:45,000 is not hard-coded in the PostItem. 48 00:02:45,000 --> 00:02:49,000 We will also not fetch it from inside the PostItem 49 00:02:49,000 --> 00:02:52,000 with user fact and fetch or anything like that. 50 00:02:52,000 --> 00:02:56,000 Instead I expect that I get it through props so that 51 00:02:56,000 --> 00:03:00,000 in the post-grid component where we rendered a PostItems 52 00:03:00,000 --> 00:03:02,000 and where we have a list of posts 53 00:03:02,000 --> 00:03:05,000 which probably is a list of JavaScript objects 54 00:03:05,000 --> 00:03:09,000 with the post data where we then just forward 55 00:03:09,000 --> 00:03:13,000 that data we have here already into the PostItem, 56 00:03:13,000 --> 00:03:15,000 through props, that's the goal. 57 00:03:15,000 --> 00:03:19,000 So in PostItem, we can expect a couple of props 58 00:03:19,000 --> 00:03:22,000 and I will use object de-structuring 59 00:03:22,000 --> 00:03:27,000 to pull those prop properties into separate constants. 60 00:03:28,000 --> 00:03:29,000 Now it is your component. 61 00:03:29,000 --> 00:03:33,000 It is up to you how you expect to get data, 62 00:03:33,000 --> 00:03:37,000 how you expect to pass data to this component. 63 00:03:37,000 --> 00:03:39,000 If you wanna have one prop 64 00:03:39,000 --> 00:03:43,000 which carries the entire post data or multiple props 65 00:03:43,000 --> 00:03:46,000 and I will go for one prop here 66 00:03:46,000 --> 00:03:51,000 a post prop on props, and I'll destructure that. 67 00:03:51,000 --> 00:03:53,000 So I expect that I get a post prop 68 00:03:53,000 --> 00:03:56,000 and that post prop holds a JavaScript object 69 00:03:56,000 --> 00:04:00,000 with multiple properties which describe the post 70 00:04:00,000 --> 00:04:02,000 and I'm now pulling out those properties 71 00:04:02,000 --> 00:04:06,000 into separate constants with object de-structuring here. 72 00:04:07,000 --> 00:04:08,000 And we could, for example, 73 00:04:08,000 --> 00:04:12,000 expect a title, a image, an excerpt, 74 00:04:12,000 --> 00:04:15,000 which is a short summary text basically for the post, 75 00:04:15,000 --> 00:04:20,000 the date, and also the slug of that post. 76 00:04:20,000 --> 00:04:23,000 So the path to the post so to say 77 00:04:23,000 --> 00:04:27,000 the unique identifier of the post. 78 00:04:27,000 --> 00:04:30,000 And that's the data with which we can break down there 79 00:04:30,000 --> 00:04:31,000 for example, 80 00:04:31,000 --> 00:04:35,000 for the title we can now output the title, 81 00:04:35,000 --> 00:04:37,000 which we extract here. 82 00:04:38,000 --> 00:04:41,000 Now for the date, we can also output this 83 00:04:41,000 --> 00:04:43,000 but I wanna format it first, 84 00:04:43,000 --> 00:04:45,000 make it more human readable 85 00:04:45,000 --> 00:04:48,000 because the date which we get here as a prop 86 00:04:48,000 --> 00:04:52,000 will be in a more machine readable format. 87 00:04:52,000 --> 00:04:56,000 All the human readable but not nicely formatted. 88 00:04:56,000 --> 00:04:58,000 And I wanna make sure that it is nicely formatted 89 00:04:58,000 --> 00:05:03,000 hence here I will actually create a formatted date constant, 90 00:05:04,000 --> 00:05:06,000 where I create a new date object 91 00:05:06,000 --> 00:05:09,000 and pass my date prop to it, 92 00:05:09,000 --> 00:05:13,000 so that a new date JavaScript object is constructed 93 00:05:13,000 --> 00:05:16,000 based on that date value, which I receive here. 94 00:05:16,000 --> 00:05:18,000 And hence of course, we have to make sure 95 00:05:18,000 --> 00:05:21,000 that date holds a value which can be used 96 00:05:21,000 --> 00:05:23,000 with this constructor function 97 00:05:23,000 --> 00:05:26,000 and we will make sure that this the case. 98 00:05:26,000 --> 00:05:29,000 And then on that date object, 99 00:05:29,000 --> 00:05:31,000 we can call toLocalDateString 100 00:05:32,000 --> 00:05:34,000 and pass en-US 101 00:05:34,000 --> 00:05:37,000 as a first argument and a configuration object 102 00:05:37,000 --> 00:05:41,000 as a second argument to output a human readable date. 103 00:05:42,000 --> 00:05:47,000 And here I'll set day to numeric, I'll set month to long 104 00:05:49,000 --> 00:05:53,000 so that if it's January we don't output 01 or just 1 105 00:05:53,000 --> 00:05:57,000 but instead January as a text 106 00:05:57,000 --> 00:06:01,000 and then year to numeric as well. 107 00:06:03,000 --> 00:06:05,000 Okay so now we've got that formatted date 108 00:06:05,000 --> 00:06:06,000 and it's now this formatted date 109 00:06:06,000 --> 00:06:08,000 which I wanna use down here. 110 00:06:08,000 --> 00:06:11,000 So here we output the formatted date. 111 00:06:13,000 --> 00:06:18,000 Now for the excerpt we wanna output the well excerpt 112 00:06:18,000 --> 00:06:20,000 which we're getting as a prop. 113 00:06:20,000 --> 00:06:22,000 So I'll put excerpt here, 114 00:06:22,000 --> 00:06:25,000 this excerpt and now for the image, 115 00:06:25,000 --> 00:06:30,000 the image needs a source property. 116 00:06:30,000 --> 00:06:32,000 It needs an alt text 117 00:06:32,000 --> 00:06:37,000 and then we need to specify the width and the height. 118 00:06:40,000 --> 00:06:41,000 Now let's start with alt. 119 00:06:41,000 --> 00:06:44,000 The alt text could just be our title here, 120 00:06:44,000 --> 00:06:47,000 so I'll just use title. 121 00:06:48,000 --> 00:06:51,000 Now for width and height 122 00:06:51,000 --> 00:06:53,000 I also prepared some values which should work 123 00:06:53,000 --> 00:06:58,000 and that's 300 and 200 pixels roughly. 124 00:06:59,000 --> 00:07:01,000 That should produce good-looking images. 125 00:07:01,000 --> 00:07:04,000 We will also sometimes have images, 126 00:07:04,000 --> 00:07:06,000 which are a bit wider than 300 127 00:07:06,000 --> 00:07:10,000 because here the image will actually scale in size 128 00:07:10,000 --> 00:07:12,000 as defined in css. 129 00:07:12,000 --> 00:07:17,000 The css code is such that the image will differ in size 130 00:07:17,000 --> 00:07:21,000 but still will always produce good-looking images 131 00:07:21,000 --> 00:07:23,000 with these settings. 132 00:07:23,000 --> 00:07:27,000 And it always will be a bit of tweaking and trial and error 133 00:07:27,000 --> 00:07:29,000 to find good settings here 134 00:07:29,000 --> 00:07:32,000 to get images which are as small as possible 135 00:07:32,000 --> 00:07:34,000 and still look good. 136 00:07:35,000 --> 00:07:36,000 But I'll come back to the image later 137 00:07:36,000 --> 00:07:38,000 because we will also need to add 138 00:07:38,000 --> 00:07:41,000 the layout property here later. 139 00:07:41,000 --> 00:07:43,000 But for the moment let's keep it like this 140 00:07:43,000 --> 00:07:47,000 so that we then also see why we will need to add it. 141 00:07:47,000 --> 00:07:49,000 For the moment let's focus on the source instead. 142 00:07:49,000 --> 00:07:50,000 What is the source? 143 00:07:50,000 --> 00:07:52,000 Well, we get an image here 144 00:07:52,000 --> 00:07:54,000 but the image which we get 145 00:07:54,000 --> 00:07:58,000 will actually just be the image file name. 146 00:07:58,000 --> 00:08:01,000 So we need to construct a full imagePath first 147 00:08:01,000 --> 00:08:03,000 because the file name is not enough. 148 00:08:04,000 --> 00:08:06,000 And I'll do this with a template literal. 149 00:08:06,000 --> 00:08:10,000 So with back ticks and we will start with a hard-coded 150 00:08:10,000 --> 00:08:14,000 string of /images/posts. 151 00:08:14,000 --> 00:08:16,000 Now that's important at the moment 152 00:08:16,000 --> 00:08:20,000 in the public images folder, we have no posts folder. 153 00:08:20,000 --> 00:08:22,000 I'll change this now and I'll add one. 154 00:08:23,000 --> 00:08:25,000 This folder is empty right now 155 00:08:25,000 --> 00:08:28,000 but it will very soon contain some images. 156 00:08:28,000 --> 00:08:30,000 So it's this folder which will hold images 157 00:08:30,000 --> 00:08:32,000 for individual posts. 158 00:08:33,000 --> 00:08:37,000 And that's therefore the start of this image path. 159 00:08:37,000 --> 00:08:41,000 Then I wanna have a sub folder in that post folder 160 00:08:41,000 --> 00:08:43,000 for every post which we add. 161 00:08:43,000 --> 00:08:47,000 And that sub folder should have the unique identifier 162 00:08:47,000 --> 00:08:49,000 of that post as a name. 163 00:08:49,000 --> 00:08:53,000 So that slug, hence the next segment here is the slug. 164 00:08:53,000 --> 00:08:57,000 We'll dive into a sub folder of that slug 165 00:08:57,000 --> 00:09:01,000 So with that slug as a name in that images posts folder 166 00:09:01,000 --> 00:09:02,000 and then in there, 167 00:09:02,000 --> 00:09:06,000 we look for the actual image file like this. 168 00:09:06,000 --> 00:09:09,000 That's my image path and therefore now 169 00:09:09,000 --> 00:09:11,000 that is what I'll set here as a source. 170 00:09:13,000 --> 00:09:17,000 Okay, so that is now this PostItem component here 171 00:09:18,000 --> 00:09:21,000 for image to work we however 172 00:09:21,000 --> 00:09:26,000 still need to import this image component from next image. 173 00:09:27,000 --> 00:09:28,000 But now we've got this setup. 174 00:09:28,000 --> 00:09:33,000 Now we can connect this to our posts-grid 175 00:09:33,000 --> 00:09:36,000 and then start adding some dummy data 176 00:09:36,000 --> 00:09:38,000 so that we do see some output.