feat(gallery): packing

web/pages/gallery.templ

@@ -1,13 +1,24 @@
 package pages
 
-import "git.schreifuchs.ch/schreifuchs/schreifuchs.ch/internal/components/images"
+import "git.schreifuchs.ch/schreifuchs/schreifuchs.ch/internal/components/gallery"
+import "fmt"
 
-templ Gallery(images []images.Image) {
-	<div class="grid gap-5">
-		for _, img := range images {
-			if uid, err :=  img.UID(); err == nil {
-				<img src={ "/images/" + uid }/>
-			}
+templ Gallery(g gallery.Gallery) {
+	<div
+		class="grid gap-5 m-5"
+		style={ fmt.Sprintf("grid-template-columns: repeat(%d, 1fr); grid-template-rows: repeat(%d, auto);", g.GridWith, g.GridHeight) }
+	>
+		for _, img := range g.Images {
+			<div
+				style={ fmt.Sprintf("grid-column: %d / span %d; grid-row: %d / span %d;", img.X+1, img.Width, img.Y+1, img.Height) }
+				class="overflow-hidden shadow-sm"
+			>
+				<img
+					src={ "/images/" + img.UID }
+					class="w-full h-full object-cover"
+					alt="Gallery item"
+				/>
+			</div>
 		}
 	</div>
 }