We added an image to each review page.
Now let's do the same for the
page listing all the reviews.
Let me go and open the right file in the editor.
In this page we could show a card for each review,
with an image and the game title.
So let's copy the image element
from a review page,
since it will be very similar.
Here we can display the image inside the Link,
so it will be clickable.
But let's make it smaller, like 320 by 180,
because we'll have several images on this page.
That looks good.
Let's do the same for the first item.
This one is "hollow-knight",
so we need to load the right image.
That's fine.
I'll put the Developer Tools on one side for now,
to be able to see the full page in the browser.
Now, let's style each item as a card.
First of all, let's set the list element
to use flexbox, displaying the items in a column,
and with a gap between them.
This will make sure there's some
space between each item.
Now, let's style each item, starting
from the first one.
We want it to have a border.
It's not that easy to see, but there
is a thin gray line around it.
We'll want the item to be the
same width as the image,
so I'll use "w-80", that just
happens to be "320px"
which is exactly the same width
we set on the image.
Ok, the border is now aligned with the image.
It's still not very visible though;
let's try setting the background to "white".
This way the card stands out a bit more.
Now, we should center the card title.
Let me wrap the text in an "h2" heading,
so we can then add some styles to it.
We can use "text-center".
That's good, but we need some
vertical padding as well.
We can remove the margin below
the image at this point.
Ok, the title looks about right.
Now, we could make the card rounded as well.
That's nicer, but the image
corners don't quite match.
Since it's now part of the card,
the image shouldn't be rounded at the bottom.
We can change the image to use "rounded-t",
that will only apply the rounding to the top.
Ok. As a final touch, let's add a "shadow",
which will give the impression that
the card is slightly raised.
We may also want to give some visual feedback
when the user moves the mouse over the card,
to show that that item is selected.
Let's use the "hover:" modifier,
and set the "shadow" to "extra-large"
for this state.
This way, if we move the mouse over,
you can see that the item appears
to be lifted up slightly.
Ok, I think this card looks decent now.
Let's apply the same styles to the other item.
It's probably quicker if I
overwrite the whole thing,
and then replace "hollow-knight"
with "stardew-valley" everywhere,
including in the title text.
Ok, the Reviews page now shows two nice cards,
and it will highlight the selected
item with a bit of a shadow.
At some point we'll use the same
code for all the items,
without duplicating the styles,
but this works fine for now.
I should also mention that
so far we didn't really think
about image optimization.
If we use the Developer Tools
and inspect one of these images,
you can see that it's rendered as 320x180
(minus 1 pixel for the border)
but the original image is 1280x720.
So, this image file is too large.
Ideally we should resize each image to match
the dimensions we use in each page.
We could keep different files
in our "public" folder,
with smaller and larger images for each game.
But we're not actually going
to worry about this for now,
because later on we'll see how Next.js
can automatically optimize our images.
That feature however is not compatible
withÂ doing a static HTML export,
so we'll cover it in a later section,
when we get to features that require
running a Node.js server.