Empty

package empty

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the empty state.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div data-slot="empty" class={gx.Cx("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12", p.Class)} {...p.Attrs}>{p.Children}</div>

package empty

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the header: the media, the title and the description.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div data-slot="empty-header" class={gx.Cx("flex max-w-sm flex-col items-center gap-2 text-center", p.Class)} {...p.Attrs}>{p.Children}</div>

package empty

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the title text.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div data-slot="empty-title" class={gx.Cx("text-lg font-medium tracking-tight", p.Class)} {...p.Attrs}>{p.Children}</div>

package empty

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the description text.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div data-slot="empty-description" class={gx.Cx("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", p.Class)} {...p.Attrs}>{p.Children}</div>

package empty

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content below the header, for example the actions.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div data-slot="empty-content" class={gx.Cx("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", p.Class)} {...p.Attrs}>{p.Children}</div>

package empty

props {
  // Variant sets the look of the media: Default or Icon. Icon draws a muted rounded box.
  Variant  Variant = Default
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the media, for example an icon.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div data-slot="empty-icon" data-variant={p.variant()} class={gx.Cx("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", variantClass[Variant(p.variant())], p.Class)} {...p.Attrs}>{p.Children}</div>

package empty

import (
	"github.com/alternayte/gx"
	"github.com/alternayte/gx/registry/button"
	"github.com/alternayte/gx/registry/icons"
)

var EmptyFixtures = gx.Fixtures[EmptyProps]{
	"Full": {Children: gx.Frag(
		EmptyHeader(EmptyHeaderProps{Children: gx.Frag(
			EmptyMedia(EmptyMediaProps{Variant: Icon, Children: icons.Info(icons.InfoProps{})}),
			EmptyTitle(EmptyTitleProps{Children: gx.Text("No projects")}),
			EmptyDescription(EmptyDescriptionProps{Children: gx.Text("Create your first project to start.")}),
		)}),
		EmptyContent(EmptyContentProps{Children: button.Button(button.ButtonProps{Children: gx.Text("New project")})}),
	)},
	"Outline": {Class: "border", Children: EmptyHeader(EmptyHeaderProps{Children: gx.Frag(
		EmptyTitle(EmptyTitleProps{Children: gx.Text("No results")}),
		EmptyDescription(EmptyDescriptionProps{Children: gx.Text("Change the filter and search again.")}),
	)})},
}

package empty

import "github.com/alternayte/gx"

// Variant is the look of the media slot of an empty state.
type Variant string

// The variants of empty.EmptyMedia.
const (
	Default Variant = "default"
	Icon    Variant = "icon"
)

var variantClass = gx.Enum[Variant]{
	Default: "bg-transparent",
	Icon:    "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
}

// variant returns the data-variant value; a zero value is Default.
func (p EmptyMediaProps) variant() string {
	if p.Variant == "" {
		return string(Default)
	}
	return string(p.Variant)
}

package empty

import "github.com/alternayte/gx"

var EmptyContentFixtures = gx.Fixtures[EmptyContentProps]{"Empty": {}}

package empty

import "github.com/alternayte/gx"

var EmptyDescriptionFixtures = gx.Fixtures[EmptyDescriptionProps]{"Text": {Children: gx.Text("Create your first project.")}}

package empty

import "github.com/alternayte/gx"

var EmptyHeaderFixtures = gx.Fixtures[EmptyHeaderProps]{"Empty": {}}

package empty

import (
	"github.com/alternayte/gx"
	"github.com/alternayte/gx/registry/icons"
)

var EmptyMediaFixtures = gx.Fixtures[EmptyMediaProps]{
	"Icon":    {Variant: Icon, Children: icons.Info(icons.InfoProps{})},
	"Default": {Children: icons.Info(icons.InfoProps{Class: "size-8"})},
}

package empty

import "github.com/alternayte/gx"

var EmptyTitleFixtures = gx.Fixtures[EmptyTitleProps]{"Title": {Children: gx.Text("No projects")}}