💄 update vinyl-page
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
parent
90deb66ad8
commit
5309908a11
25 changed files with 63 additions and 32 deletions
|
@ -3,11 +3,12 @@ import SectionContainer from '../components/SectionContainer.astro';
|
|||
import vinyl from '../data/vinyl.json'
|
||||
|
||||
const vinylByAlbumTitle = vinyl.reduce((acc:any, currentVinyl) => {
|
||||
const { album, artist } = currentVinyl;
|
||||
const { album, artist, cover } = currentVinyl;
|
||||
if (!acc[album]) {
|
||||
acc[album] = {
|
||||
vinyls: [],
|
||||
artist: artist
|
||||
artist: artist,
|
||||
cover: cover
|
||||
};
|
||||
}
|
||||
acc[album].vinyls.push(currentVinyl);
|
||||
|
@ -28,11 +29,18 @@ const vinylData = Object.keys(vinylByAlbumTitle).map(albumTitle => {
|
|||
<SectionContainer>
|
||||
<main class="flex flex-col gap-4 mt-4">
|
||||
<h1 class="text-3xl font-extrabold">📀 Platesamlinga</h1>
|
||||
{vinylData.map((album) => (
|
||||
<div class="flex flex-col">
|
||||
<li><strong>{album.title}</strong> by {album.artist}</li>
|
||||
</div>
|
||||
))}
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
|
||||
{vinylData.map((album) => (
|
||||
<div class="flex flex-col">
|
||||
<img
|
||||
src={album.cover}
|
||||
class="w-400"
|
||||
/>
|
||||
<p class="font-bold">{album.title}</p>
|
||||
<p>{album.artist}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
</SectionContainer>
|
||||
|
||||
|
@ -41,4 +49,4 @@ const vinylData = Object.keys(vinylByAlbumTitle).map(albumTitle => {
|
|||
list-style: disc inside;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue