hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add examples page with prerendered swatches

Browse source
This commit is contained in:
Felix Roos 2022-12-28 14:40:53 +01:00
parent 1dd0ff13d8
commit 9f058bd88a
6 changed files with 380 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

18
website/src/pages/examples/index.astro Normal file
View file

@ -0,0 +1,18 @@
---
import * as tunes from '../../../src/repl/tunes.mjs';
---
<body class="bg-slate-800">
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2 p-2 select-none">
{
Object.entries(tunes).map(([name, tune]) => (
<a class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative" href={`/#${btoa(tune)}`}>
<div class="absolute w-full h-full flex justify-center items-center">
<span class="bg-slate-800 p-2 rounded-md text-white">{name}</span>
</div>
<img src={`/img/example-${name}.png`} />
</a>
))
}
</div>
</body>