themes-coffee/location_card.templ
Alex Dunmow 11c6c8c63e initial: theme plugin coffee
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously
an unversioned directory inside ~/src/blockninja-themes/coffee.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-06 14:11:22 +08:00

36 lines
1.7 KiB
Plaintext

package main
// locationCardComponent renders a location card with doodled pin overlay.
templ locationCardComponent(data LocationCardData) {
<section data-block="coffee:location_card" class="my-8">
<div class="coffee-card max-w-3xl mx-auto p-6 grid gap-6 md:grid-cols-2">
<div class="relative aspect-[4/3] overflow-hidden rounded-sm bg-secondary">
if data.MapImage != "" {
<img src={ data.MapImage } alt="Map of our location" class="absolute inset-0 w-full h-full object-cover" loading="lazy"/>
} else {
<div class="absolute inset-0 flex items-center justify-center coffee-body text-sm text-muted-foreground italic">
Map preview
</div>
}
<svg class="coffee-pin absolute top-1/3 left-1/2 -translate-x-1/2 w-10 h-10" viewBox="0 0 40 56" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M20 4 Q 6 4 6 22 Q 6 36 20 52 Q 34 36 34 22 Q 34 4 20 4 Z"></path>
<circle cx="20" cy="22" r="6"></circle>
</svg>
</div>
<div class="flex flex-col gap-3 justify-center">
<h3 class="coffee-display text-2xl text-primary">
<span class="coffee-doodle-underline">Find us</span>
</h3>
if data.Address != "" {
<address class="coffee-body not-italic text-foreground whitespace-pre-line">{ data.Address }</address>
} else {
<p class="coffee-body text-sm text-muted-foreground italic">Add an address to render the location card.</p>
}
if data.DirectionsURL != "" {
<a href={ templ.SafeURL(data.DirectionsURL) } class="kraft-tag mt-2 self-start" target="_blank" rel="noopener noreferrer">Directions</a>
}
</div>
</div>
</section>
}