85 lines
3.7 KiB
Plaintext
85 lines
3.7 KiB
Plaintext
package main
|
|
|
|
// statsContainerComponent renders the stats grid container with pre-rendered children.
|
|
templ statsContainerComponent(childCount int, childrenHTML string) {
|
|
<section class="py-16 gotham-surface flex-1">
|
|
<div class="max-w-6xl mx-auto px-4">
|
|
<div class={ "grid gap-8", gridCols(childCount) }>
|
|
@templ.Raw(childrenHTML)
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
// statsEmptyComponent renders an empty placeholder for stats without items.
|
|
templ statsEmptyComponent() {
|
|
<section class="py-16 gotham-surface flex-1">
|
|
<div class="max-w-6xl mx-auto px-4">
|
|
<div class="text-center p-8 border border-dashed border-border rounded-lg">
|
|
<p class="text-muted-foreground">Click + to add stat items</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
// statsComponent renders a Gotham-styled stats counter grid (legacy content-based).
|
|
templ statsComponent(items []StatItem) {
|
|
<section class="py-16 gotham-surface flex-1">
|
|
<div class="max-w-6xl mx-auto px-4">
|
|
<div class={ "grid gap-8", gridCols(len(items)) }>
|
|
for _, stat := range items {
|
|
<div class="text-center p-6 rounded-lg gotham-border border">
|
|
if stat.Icon != "" {
|
|
<div class="mb-3 gotham-accent">
|
|
@iconSVG(stat.Icon)
|
|
</div>
|
|
}
|
|
<div class="text-4xl font-bold gotham-accent mb-2">{ stat.Value }</div>
|
|
<div class="text-muted-foreground uppercase text-sm tracking-wider">{ stat.Label }</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
// gridCols returns the appropriate grid column class based on item count.
|
|
func gridCols(count int) string {
|
|
switch count {
|
|
case 1:
|
|
return "grid-cols-1"
|
|
case 2:
|
|
return "grid-cols-1 md:grid-cols-2"
|
|
case 3:
|
|
return "grid-cols-1 md:grid-cols-3"
|
|
default:
|
|
return "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
|
|
}
|
|
}
|
|
|
|
// iconSVG renders a simple icon based on name.
|
|
templ iconSVG(name string) {
|
|
switch name {
|
|
case "chart":
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
|
</svg>
|
|
case "users":
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
|
|
</svg>
|
|
case "clock":
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
case "star":
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
|
|
</svg>
|
|
default:
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
</svg>
|
|
}
|
|
}
|