package components
import "fmt"
// Layout is the base HTML layout for the admin panel
templ Layout(title string, username string) {
{ title }
{ children... }
}
// Header renders the admin header with navigation
templ Header(username string) {
ZFS Backup
Admin Panel
{ username }
}
// StatsCard renders a single statistics card
templ StatsCard(title string, value string) {
{ title }
{ value }
}
// statsIcon returns the Font Awesome icon for a stats card
func statsIcon(title string) string {
switch title {
case "Clients":
return "fa-users"
case "Total Snapshots":
return "fa-camera"
case "Total Storage":
return "fa-hard-drive"
default:
return "fa-chart-bar"
}
}
// TabButton renders a tab navigation button
templ TabButton(id string, label string, active bool) {
}
// tabIcon returns the Font Awesome icon for a tab
func tabIcon(id string) string {
switch id {
case "clients":
return "fa-users"
case "snapshots":
return "fa-images"
case "admins":
return "fa-user-shield"
default:
return "fa-folder"
}
}
// tabButtonClass returns the CSS class for a tab button
func tabButtonClass(active bool) string {
if active {
return "bg-gradient-to-r from-violet-600 to-fuchsia-600 text-white shadow-lg shadow-violet-500/25"
}
return "bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-900 dark:hover:text-white border border-slate-200 dark:border-slate-700"
}
// Modal renders a modal dialog
templ Modal(id string, title string) {
{ title }
{ children... }
}
// FormInput renders a form input field
templ FormInput(id string, label string, inputType string, placeholder string, required bool) {
}
// FormSelect renders a form select field
templ FormSelect(id string, label string, options []SelectOption) {
}
// SelectOption represents an option in a select field
type SelectOption struct {
Value string
Label string
Selected bool
}
// FormCheckbox renders a form checkbox
templ FormCheckbox(id string, label string, checked bool) {
}
// Button renders a styled button
templ Button(label string, variant string) {
}
// buttonVariantClass returns the CSS class for a button variant
func buttonVariantClass(variant string) string {
switch variant {
case "primary":
return "bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white shadow-lg shadow-violet-500/25"
case "danger":
return "bg-gradient-to-r from-red-500 to-rose-600 hover:from-red-400 hover:to-rose-500 text-white shadow-lg shadow-red-500/25"
case "success":
return "bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-400 hover:to-green-500 text-white shadow-lg shadow-emerald-500/25"
case "warning":
return "bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-400 hover:to-orange-500 text-white shadow-lg shadow-amber-500/25"
case "purple":
return "bg-gradient-to-r from-purple-500 to-violet-600 hover:from-purple-400 hover:to-violet-500 text-white shadow-lg shadow-purple-500/25"
case "orange":
return "bg-gradient-to-r from-orange-500 to-amber-600 hover:from-orange-400 hover:to-amber-500 text-white shadow-lg shadow-orange-500/25"
default:
return "bg-slate-500 hover:bg-slate-600 text-white"
}
}
// Badge renders a status badge
templ Badge(text string, variant string) {
{ text }
}
// badgeVariantClass returns the CSS class for a badge variant
func badgeVariantClass(variant string) string {
switch variant {
case "success":
return "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-500/30"
case "danger":
return "bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400 border border-red-200 dark:border-red-500/30"
case "info":
return "bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400 border border-blue-200 dark:border-blue-500/30"
case "warning":
return "bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400 border border-amber-200 dark:border-amber-500/30"
case "purple":
return "bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-400 border border-purple-200 dark:border-purple-500/30"
default:
return "bg-slate-100 text-slate-700 dark:bg-slate-500/20 dark:text-slate-400 border border-slate-200 dark:border-slate-500/30"
}
}
// ProgressBar renders a progress bar
templ ProgressBar(percent float64) {