sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

♻️ redo vinyl-page

Browse source 
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2023-12-15 22:57:51 +01:00
parent 7fd00547e6
commit ecf4208c17
Signed by untrusted user who does not match committer: sidski
GPG key ID: D2BBDF3EDE6BA9A6
1 changed files with 17 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/pages/vinyl.astro
View file

@ -3,12 +3,11 @@ import SectionContainer from '../components/SectionContainer.astro';
import vinyl from '../data/vinyl.json'
const vinylByAlbumTitle = vinyl.reduce((acc:any, currentVinyl) => {
const { album, artist, cover } = currentVinyl;
const { album, artist } = currentVinyl;
if (!acc[album]) {
acc[album] = {
vinyls: [],
artist: artist,
cover: cover
artist: artist
};
}
acc[album].vinyls.push(currentVinyl);
@ -27,25 +26,19 @@ const vinylData = Object.keys(vinylByAlbumTitle).map(albumTitle => {
---
<SectionContainer>
<div class="flex flex-col gap-4 mt-4">
<div>
<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>
))}
</main>
</SectionContainer>
<h1 class="font-bold text-3xl">
📀 Platesamlinga
</h1>
<p class="italic">Here's a collection of all the vinyl's that I got!</p>
</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>
</div>
</SectionContainer>
<style>
li {
list-style: disc inside;
padding: 0 0 0 10px;
}
</style>