Components

// Package card is a card with a title, a footer and a list.
package card

import "github.com/alternayte/gx"

// Tone is the colour of a card.
type Tone string

// The tones of a card.
const (
	Plain Tone = "plain"
	Warn  Tone = "warn"
)

// DefaultRow renders one list item as text.
func DefaultRow(item string) gx.Node {
	return gx.Text(item)
}

package card

props {
  // Title is the heading. It has no default, so it is required.
  Title string
  // Tone is the colour. It has a default, so it is optional.
  Tone Tone = Plain
  // Footer is a named slot.
  Footer gx.Node = nil
  // Children is the default slot: the content of the tag.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs gx.Attrs = nil
}

<article class="rounded-xl border border-border p-4" class:border-destructive={p.Tone == Warn} {...p.Attrs}>
  <h3 class="font-semibold">{p.Title}</h3>
  {p.Children}
  if p.Footer != nil {
    <footer class="mt-3 text-sm text-muted-foreground">{p.Footer}</footer>
  }
  {/* A comment in braces is not in the output. */}
</article>

package card

props {
  // Items is the list of names.
  Items []string
  // Row renders one item. A caller can replace it.
  Row gx.Slot[string] = DefaultRow
}

<ul class="mt-2 list-disc pl-5">
  for _, item := range p.Items {
    <li>{p.Row(item)}</li>
  }
</ul>

package home

import "acme/ui/card"

props {
  // Names is the list of products that are low.
  Names []string = nil
}

<gx.Head title="Components" />
<card.Card title="Stock" tone={card.Warn}>
  <:footer>Updated today</:footer>
  switch len(p.Names) {
  case 0:
    <p>No product is low.</p>
  default:
    <p>These products are low.</p>
    <card.List items={p.Names}>
      <:row let={name}><strong>{name}</strong></:row>
    </card.List>
  }
</card.Card>

// Package home is the home slice: its page, its action and their views.
package home

import (
	"github.com/alternayte/gx"
	"acme/home/route"
)

// Page is the home page. The loader returns the props of the view.
var Page = gx.Page(func(c *gx.Ctx, in route.Home) (HomeProps, error) {
	return HomeProps{Names: []string{"Tea", "Coffee"}}, nil
}, Home)

// Save patches the saved text of the counter that invoked it.
var Save = gx.Action(func(c *gx.Ctx, in route.Save) error {
	key := gx.ScopeKey(gx.Scope(c.R), "home.Counter")
	return c.Patch(CounterSaved(key, in.Count))
})

// Routes lists every page, action and form of the slice.
var Routes = gx.Collect(Page, Save)

<h3 class="font-semibold">Stock</h3>
<strong>Tea</strong>
Updated today
border-destructive