Discover books, shows, and movies at your level. Track your progress by filling your Shelf with what you find, and share with other language learners. *No dusting required.
shlf.space
1package book
2
3import "fmt"
4
5templ Book(params BookParams) {
6 <style>
7 .hide {
8 display: none;
9 }
10 .book:hover + .hide {
11 display: block;
12 }
13 </style>
14 <div class="relative inline-block">
15 <img
16 alt={ fmt.Sprintf("%s's spine", params.Title) }
17 src={ templ.SafeURL(fmt.Sprintf("https://image.yes24.com/goods/%s/SIDE/XL", params.Yes24Id)) }
18 class="book w-6"
19 />
20 <div class="hide absolute top-10 left-5 border bg-white z-10">
21 <div class="flex gap-2 w-96">
22 <div class="w-3/4">
23 <h2>{ params.Title }</h2>
24 <h4>By { params.Author }</h4>
25 <p>{ params.Description }</p>
26 </div>
27 <img
28 class="w-1/4 h-fit"
29 src={ templ.SafeURL(fmt.Sprintf("https://image.yes24.com/goods/%s/XL", params.Yes24Id)) }
30 />
31 </div>
32 </div>
33 </div>
34}