themes-kindergarten/gallery_of_art.templ

package main

import (
	"fmt"

	"git.dev.alexdunmow.com/block/core/blocks"
)

// galleryOfArtComponent renders a polaroid-style grid of artworks.
templ galleryOfArtComponent(data GalleryData) {
	<section class="kg-section" data-block="kindergarten:gallery_of_art">
		<div class="kg-container">
			if data.Title != "" {
				<h2 class="kg-display kg-crayon-underline" style="font-size: 2rem; margin-bottom: 1.5rem;">{ data.Title }</h2>
			}
			if len(data.Items) == 0 {
				<div class="kg-empty" data-empty="true">No artworks yet — add one to fill the gallery wall.</div>
			} else {
				<div class="kg-gallery-grid">
					for _, art := range data.Items {
						<figure class="kg-polaroid">
							if art.Image != "" {
								<img src={ blocks.ResolveMediaPath(art.Image) } alt={ polaroidAlt(art, data.ShowChildName) } />
							} else {
								<span class="kg-polaroid-image" role="img" aria-label="Placeholder for child artwork"></span>
							}
							<figcaption class="kg-polaroid-caption">
								if data.ShowChildName && art.ChildName != "" {
									<span>{ art.ChildName }</span>
								}
								if data.ShowChildName && art.ChildName != "" && art.Age > 0 {
									{ ", " }
								}
								if art.Age > 0 {
									<span>{ fmt.Sprintf("age %d", art.Age) }</span>
								}
							</figcaption>
						</figure>
					}
				</div>
			}
		</div>
	</section>
}

// polaroidAlt produces a respectful alt-text that honours the privacy toggle.
func polaroidAlt(art GalleryArt, showChildName bool) string {
	if showChildName && art.ChildName != "" {
		return fmt.Sprintf("Artwork by %s", art.ChildName)
	}
	return "Children's artwork"
}