Componentes

Catálogo vivo de los componentes del Admin Panel. Cada componente vive en admin/templates/components/.

---

Buttons

Go Template

{{template "components/button" dict
  "text"    "Guardar"
  "type"    "submit"
  "variant" "primary"
}}

{{template "components/button" dict
  "text"    "Cancelar"
  "variant" "secondary"
  "hx-get"  "/admin/productos"
}}

{{template "components/button" dict
  "text"    "Eliminar"
  "variant" "danger"
  "hx-delete" (printf "/admin/productos/%s" .Product.ID)
  "hx-confirm" "¿Eliminar este producto?"
}}

HTML directo

<!-- Primario -->
<button type="submit"
  class="inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700
         text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors">
  Guardar cambios
</button>

<!-- Secundario -->
<button type="button"
  class="inline-flex items-center gap-2 bg-white hover:bg-gray-50
         text-gray-700 text-sm font-medium px-4 py-2 rounded-lg
         border border-gray-300 transition-colors">
  Cancelar
</button>

---

Badges

ActivoBorradorArchivadoPendienteCanceladoPro

{{template "components/badge" dict "text" "Activo"    "color" "green"}}
{{template "components/badge" dict "text" "Borrador"  "color" "yellow"}}
{{template "components/badge" dict "text" "Archivado" "color" "gray"}}
{{template "components/badge" dict "text" "Pendiente" "color" "blue"}}
{{template "components/badge" dict "text" "Cancelado" "color" "red"}}

Colores disponibles

color	Fondo	Texto	Uso
green	green-50	green-700	Activo, pagado, completado
yellow	yellow-50	yellow-800	Borrador, pendiente, advertencia
gray	slate-100	slate-600	Archivado, inactivo
blue	blue-50	blue-700	En proceso, en tránsito
red	red-50	red-700	Error, cancelado, rechazado
indigo	indigo-50	indigo-700	Plan Pro, feature premium

---

Cards

Ventas del mes

S/ 12,480

+14.2%

vs. mes anterior

<div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
  <div class="flex items-start justify-between mb-3">
    <div>
      <p class="text-sm text-gray-500">Ventas del mes</p>
      <p class="text-3xl font-bold text-gray-900 mt-1">S/ 12,480</p>
    </div>
    {{template "components/badge" dict "text" "+14.2%" "color" "green"}}
  </div>
  <p class="text-xs text-gray-400">vs. mes anterior</p>
</div>

---

Form Fields

Nombre del producto

Aparece en el storefront y en el checkout.

Precio *

El precio es requerido.

{{template "components/form-field" dict
  "label"       "Nombre del producto"
  "name"        "title"
  "type"        "text"
  "placeholder" "Ej. Zapatillas Running Pro"
  "hint"        "Aparece en el storefront y en el checkout."
  "required"    true
  "value"       .Product.Title
  "error"       .Errors.title
}}

---

Modal

<!-- Trigger -->
<button
  @click="$dispatch('open-modal', { id: 'confirm-delete' })"
  class="...">
  Eliminar
</button>

<!-- Modal -->
{{template "components/modal" dict
  "id"          "confirm-delete"
  "title"       "Confirmar eliminación"
  "description" "Esta acción no se puede deshacer."
  "confirmText" "Eliminar"
  "confirmVariant" "danger"
  "hx-delete"   (printf "/admin/productos/%s" .Product.ID)
  "hx-target"   "#product-row"
  "hx-swap"     "outerHTML"
}}

---

Toast

Los toasts se inyectan via HTMX OOB swap tras una acción exitosa:

<!-- En el handler Go, agregar al response body -->
{{template "components/toast" dict
  "message" "Producto guardado correctamente"
  "type"    "success"
}}

<!-- Tipos disponibles: success | error | warning | info -->

---

Empty State

{{template "components/empty-state" dict
  "icon"        "package"
  "title"       "Sin productos todavía"
  "description" "Crea tu primer producto para empezar a vender."
  "action"      (dict
    "text" "Crear producto"
    "href" "/admin/productos/nuevo"
  )
}}

---

Tabla

{{template "components/table" dict
  "id"      "products-table"
  "columns" (slice
    (dict "key" "title"      "label" "Producto"  "sortable" true)
    (dict "key" "price"      "label" "Precio"    "sortable" true)
    (dict "key" "status"     "label" "Estado"    "sortable" false)
    (dict "key" "created_at" "label" "Creado"    "sortable" true)
    (dict "key" "actions"    "label" ""          "sortable" false)
  )
  "rows"    .Products
  "hx-get"  "/admin/productos"
}}

---

Paginación

{{template "components/pagination" dict
  "cursor"   .Meta.Pagination.Cursor
  "has_next" .Meta.Pagination.HasNext
  "limit"    .Meta.Pagination.Limit
  "hx-get"   "/admin/productos"
  "hx-target" "#products-table"
}}