scanfile/server/web/templui/components/avatar/avatar.templ

// templui component avatar - version: v0.84.0 installed by templui v0.84.0
package avatar

import (
	"fmt"
	"git.jmbit.de/jmb/scanfile/server/web/templui/utils"
	"strings"
)

type Size string
type GroupSpacing string

const (
	SizeSm Size = "sm"
	SizeMd Size = "md"
	SizeLg Size = "lg"
)

const (
	GroupSpacingSm GroupSpacing = "sm"
	GroupSpacingMd GroupSpacing = "medium"
	GroupSpacingLg GroupSpacing = "large"
)

type Props struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Size       Size
	InGroup    bool
}

type ImageProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Alt        string
	Src        string
}

type FallbackProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type GroupProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Spacing    GroupSpacing
}

templ Avatar(props ...Props) {
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		data-avatar
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"inline-flex items-center justify-center",
				SizeClasses(p.Size),
				"rounded-full bg-muted",
				utils.If(p.InGroup, "ring-2 ring-background"),
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ Image(props ...ImageProps) {
	{{ var p ImageProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<img
		data-avatar-image
		if p.ID != "" {
			id={ p.ID }
		}
		if p.Src != "" {
			src={ p.Src }
		}
		alt={ avatarAlt(p) }
		class={
			utils.TwMerge(
				"w-full h-full",
				"rounded-full object-cover",
				p.Class,
			),
		}
		{ p.Attributes... }
	/>
}

templ Fallback(props ...FallbackProps) {
	{{ var p FallbackProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<span
		data-avatar-fallback
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"font-medium text-muted-foreground",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</span>
}

templ Group(props ...GroupProps) {
	{{ var p GroupProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"flex items-center -space-x-3",
				groupSpacingClasses(p.Spacing),
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ GroupOverflow(count int, props ...Props) {
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"inline-flex items-center justify-center",
				SizeClasses(p.Size),
				"rounded-full bg-muted ring-2 ring-background",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		<span class="text-xs font-medium">+{ fmt.Sprint(count) }</span>
	</div>
}

func SizeClasses(size Size) string {
	switch size {
	case SizeSm:
		return "w-8 h-8 text-xs"
	case SizeLg:
		return "w-16 h-16 text-xl"
	default: // SizeMd
		return "w-12 h-12 text-base"
	}
}

func Initials(name string) string {
	parts := strings.Fields(name)
	initials := ""
	for i, part := range parts {
		if i > 1 {
			break
		}
		if len(part) > 0 {
			initials += string([]rune(part)[0])
		}
	}
	return strings.ToUpper(initials)
}

func groupSpacingClasses(spacing GroupSpacing) string {
	switch spacing {
	case GroupSpacingSm:
		return "-space-x-1"
	case GroupSpacingLg:
		return "-space-x-4"
	default: // GroupSpacingMd
		return "-space-x-2"
	}
}

func avatarAlt(p ImageProps) string {
	if p.Alt != "" {
		return p.Alt
	}

	if p.ID != "" {
		return fmt.Sprintf("Avatar of %s", p.ID)
	}

	if p.Src != "" {
		return "User avatar"
	}

	return ""
}

templ Script() {
	<script defer src="/assets/js/avatar.min.js"></script>
}