Files
at-container-registry/pkg/appview/templates/components/card-grid.html
2026-04-19 17:35:41 -05:00

52 lines
1.7 KiB
HTML

{{ define "card-grid" }}
{{/*
Card grid component - displays repository cards in a responsive grid
Required:
- .Repositories: []db.RepoCardData - list of repositories to display
Optional:
- .Columns: int - number of columns on xl screens (3 or 4, default 3)
- .EmptyMessage: string - message when no repositories (default: "No repositories found.")
- .EmptyIcon: string - lucide icon name for empty state
- .EmptySubtext: string - secondary text for empty state
- .LoadMoreURL: string - URL for Load More button (HTMX)
- .TargetID: string - HTMX target ID for Load More
- .HasMore: bool - whether to show Load More button
*/}}
{{ if .Repositories }}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3{{ if eq .Columns 4 }} xl:grid-cols-4{{ end }} gap-6">
{{ range .Repositories }}
{{ template "repo-card" . }}
{{ end }}
</div>
{{ if and .HasMore .LoadMoreURL }}
<div class="mt-6 text-center">
<button
class="btn btn-outline"
hx-get="{{ .LoadMoreURL }}"
hx-trigger="click"
hx-target="#{{ .TargetID }}"
hx-swap="beforeend"
>
Load More
</button>
</div>
{{ end }}
{{ else }}
<div class="py-12 text-center">
{{ if .EmptyIcon }}
<div class="text-base-content/60 mb-4">
{{ icon .EmptyIcon "size-12 mx-auto mb-4" }}
<p class="text-lg">{{ or .EmptyMessage "No repositories found." }}</p>
</div>
{{ if .EmptySubtext }}
<p class="text-base-content/70 text-sm">{{ .EmptySubtext }}</p>
{{ end }}
{{ else }}
<p class="text-base-content/60">{{ or .EmptyMessage "No repositories found." }}</p>
{{ end }}
</div>
{{ end }}
{{ end }}