In this PostItem component,
or in this file we again create our component function
and as always export that of course.
And then we define the structure,
the markup of a single PostItem.
And for me a PostItem will be a list item
which should make sense because we're in an unordered list.
So having a list item is a good choice typically
and then the entire item should be clickable.
Therefore I'll import link from next/link
because of course I wanna use this link
to still stay in the single page application
use pre-fetching and all those things.
And I'll then add a link here with a anchor tag inside
since I'll have a more complex HTML structure in that link.
And as I mentioned a couple of minutes ago
you then need to bring your own anchor tag
to tell link that it should still render anchor tag.
And then regarding that more complex structure in here
I wanna have a div which will hold a post-image
which has at the top of this postcard and below that
another div which will hold the content,
the title, the date, and a short excerpt,
which we wanna show.
Now inside that first div idea for output my image.
And we will soon add the source and everything else.
And then the second div here
they're all add a h3 tag with the title of the post.
Then a time element, which outputs the time
something like July 13th, 2022
something like that will be output here.
And then a paragraph with the expert text of that post.
And of course at the moment it's just dummy data
soon it will be actual data.
Now, before we continue on the data,
let's continue with the styling actually
for this again I will again import classes
from that PostItem.module.css file
which I provided to you in the last lecture.
And then we add a class to the list item, the post-class.
We also add a class to the div, which wraps the image.
It's the image class.
And we add a class to this div which wraps the content.
It's the content class.
Now let's work on the data.
The data for a single PostItem of course
is not hard-coded in the PostItem.
We will also not fetch it from inside the PostItem
with user fact and fetch or anything like that.
Instead I expect that I get it through props so that
in the post-grid component where we rendered a PostItems
and where we have a list of posts
which probably is a list of JavaScript objects
with the post data where we then just forward
that data we have here already into the PostItem,
through props, that's the goal.
So in PostItem, we can expect a couple of props
and I will use object de-structuring
to pull those prop properties into separate constants.
Now it is your component.
It is up to you how you expect to get data,
how you expect to pass data to this component.
If you wanna have one prop
which carries the entire post data or multiple props
and I will go for one prop here
a post prop on props, and I'll destructure that.
So I expect that I get a post prop
and that post prop holds a JavaScript object
with multiple properties which describe the post
and I'm now pulling out those properties
into separate constants with object de-structuring here.
And we could, for example,
expect a title, a image, an excerpt,
which is a short summary text basically for the post,
the date, and also the slug of that post.
So the path to the post so to say
the unique identifier of the post.
And that's the data with which we can break down there
for example,
for the title we can now output the title,
which we extract here.
Now for the date, we can also output this
but I wanna format it first,
make it more human readable
because the date which we get here as a prop
will be in a more machine readable format.
All the human readable but not nicely formatted.
And I wanna make sure that it is nicely formatted
hence here I will actually create a formatted date constant,
where I create a new date object
and pass my date prop to it,
so that a new date JavaScript object is constructed
based on that date value, which I receive here.
And hence of course, we have to make sure
that date holds a value which can be used
with this constructor function
and we will make sure that this the case.
And then on that date object,
we can call toLocalDateString
and pass en-US
as a first argument and a configuration object
as a second argument to output a human readable date.
And here I'll set day to numeric, I'll set month to long
so that if it's January we don't output 01 or just 1
but instead January as a text
and then year to numeric as well.
Okay so now we've got that formatted date
and it's now this formatted date
which I wanna use down here.
So here we output the formatted date.
Now for the excerpt we wanna output the well excerpt
which we're getting as a prop.
So I'll put excerpt here,
this excerpt and now for the image,
the image needs a source property.
It needs an alt text
and then we need to specify the width and the height.
Now let's start with alt.
The alt text could just be our title here,
so I'll just use title.
Now for width and height
I also prepared some values which should work
and that's 300 and 200 pixels roughly.
That should produce good-looking images.
We will also sometimes have images,
which are a bit wider than 300
because here the image will actually scale in size
as defined in css.
The css code is such that the image will differ in size
but still will always produce good-looking images
with these settings.
And it always will be a bit of tweaking and trial and error
to find good settings here
to get images which are as small as possible
and still look good.
But I'll come back to the image later
because we will also need to add
the layout property here later.
But for the moment let's keep it like this
so that we then also see why we will need to add it.
For the moment let's focus on the source instead.
What is the source?
Well, we get an image here
but the image which we get
will actually just be the image file name.
So we need to construct a full imagePath first
because the file name is not enough.
And I'll do this with a template literal.
So with back ticks and we will start with a hard-coded
string of /images/posts.
Now that's important at the moment
in the public images folder, we have no posts folder.
I'll change this now and I'll add one.
This folder is empty right now
but it will very soon contain some images.
So it's this folder which will hold images
for individual posts.
And that's therefore the start of this image path.
Then I wanna have a sub folder in that post folder
for every post which we add.
And that sub folder should have the unique identifier
of that post as a name.
So that slug, hence the next segment here is the slug.
We'll dive into a sub folder of that slug
So with that slug as a name in that images posts folder
and then in there,
we look for the actual image file like this.
That's my image path and therefore now
that is what I'll set here as a source.
Okay, so that is now this PostItem component here
for image to work we however
still need to import this image component from next image.
But now we've got this setup.
Now we can connect this to our posts-grid
and then start adding some dummy data
so that we do see some output.