1bebbea5ad
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously an unversioned directory inside ~/src/blockninja-themes/noir. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
40 lines
1.3 KiB
Plaintext
40 lines
1.3 KiB
Plaintext
package main
|
|
|
|
// contactSheetComponent renders the contact sheet grid with sprocket frames.
|
|
templ contactSheetComponent(frames []ContactFrame) {
|
|
<section data-block="noir:contact_sheet" class="py-12">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
if len(frames) == 0 {
|
|
<div class="hairline p-12 text-center tracked-mono" style="color: hsl(var(--mutedForeground));">
|
|
Add frames to populate the contact sheet.
|
|
</div>
|
|
} else {
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
for _, frame := range frames {
|
|
<figure class="noir-sprocket noir-figure" data-frame-number={ frame.Frame }>
|
|
<span class="noir-frame-number tracked-mono" style="color: hsl(var(--mutedForeground));">
|
|
{ frame.Frame }
|
|
</span>
|
|
if frame.Image != "" {
|
|
<img
|
|
src={ frame.Image }
|
|
alt={ frame.Label }
|
|
loading="lazy"
|
|
class="w-full h-auto block mt-2"
|
|
/>
|
|
} else {
|
|
<div class="aspect-square hairline" style="background-color: hsl(var(--muted));"></div>
|
|
}
|
|
if frame.Label != "" {
|
|
<figcaption class="tracked-mono mt-2" style="color: hsl(var(--mutedForeground));">
|
|
{ frame.Label }
|
|
</figcaption>
|
|
}
|
|
</figure>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
}
|