Avatar
Visual representation of a user through images or initials.
TailwindCSS
package showcase
import "github.com/axzilla/templui/pkg/components"
templ AvatarWithImage() {
@components.Avatar(components.AvatarProps{
ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
Name: "John Doe",
Class: "border-2 border-border",
})
}
package components
import (
"fmt"
"github.com/axzilla/templui/pkg/utils"
"strings"
)
type AvatarSize string
const (
AvatarSizeSmall AvatarSize = "small"
AvatarSizeMedium AvatarSize = "medium"
AvatarSizeLarge AvatarSize = "large"
)
type AvatarProps struct {
ImageSrc string // URL of avatar image
Name string // Name for generating initials
Size AvatarSize // Size variant
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Avatar renders a user avatar image or initials
templ Avatar(props AvatarProps) {
<div
class={ utils.TwMerge(
// Layout
"inline-flex items-center justify-center",
avatarSizeClasses(props.Size),
// Styling
"rounded-full bg-muted",
// Custom
props.Class,
) }
{ props.Attributes... }
>
if props.ImageSrc != "" {
<img
src={ props.ImageSrc }
alt={ fmt.Sprintf("%s's avatar", props.Name) }
class={ utils.TwMerge(
// Layout
"w-full h-full",
// Styling
"rounded-full object-cover",
) }
/>
} else {
<span
class={ utils.TwMerge(
// Styling
"font-medium text-muted-foreground",
) }
>
{ avatarInitials(props.Name) }
</span>
}
</div>
}
func avatarInitials(name string) string {
parts := strings.Fields(name)
initials := ""
for i, part := range parts {
if i > 1 {
break
}
if len(part) > 0 {
initials += string(part[0])
}
}
return strings.ToUpper(initials)
}
func avatarSizeClasses(size AvatarSize) string {
switch size {
case AvatarSizeSmall:
return "w-8 h-8 text-xs"
case AvatarSizeLarge:
return "w-16 h-16 text-xl"
default:
return "w-12 h-12 text-base"
}
}
Usage
@components.Avatar(components.AvatarProps{...})Examples
With Placeholder
TD
package showcase
import "github.com/axzilla/templui/pkg/components"
templ AvatarWithPlaceholder() {
@components.Avatar(components.AvatarProps{
Name: "The Dude",
})
}
package components
import (
"fmt"
"github.com/axzilla/templui/pkg/utils"
"strings"
)
type AvatarSize string
const (
AvatarSizeSmall AvatarSize = "small"
AvatarSizeMedium AvatarSize = "medium"
AvatarSizeLarge AvatarSize = "large"
)
type AvatarProps struct {
ImageSrc string // URL of avatar image
Name string // Name for generating initials
Size AvatarSize // Size variant
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Avatar renders a user avatar image or initials
templ Avatar(props AvatarProps) {
<div
class={ utils.TwMerge(
// Layout
"inline-flex items-center justify-center",
avatarSizeClasses(props.Size),
// Styling
"rounded-full bg-muted",
// Custom
props.Class,
) }
{ props.Attributes... }
>
if props.ImageSrc != "" {
<img
src={ props.ImageSrc }
alt={ fmt.Sprintf("%s's avatar", props.Name) }
class={ utils.TwMerge(
// Layout
"w-full h-full",
// Styling
"rounded-full object-cover",
) }
/>
} else {
<span
class={ utils.TwMerge(
// Styling
"font-medium text-muted-foreground",
) }
>
{ avatarInitials(props.Name) }
</span>
}
</div>
}
func avatarInitials(name string) string {
parts := strings.Fields(name)
initials := ""
for i, part := range parts {
if i > 1 {
break
}
if len(part) > 0 {
initials += string(part[0])
}
}
return strings.ToUpper(initials)
}
func avatarSizeClasses(size AvatarSize) string {
switch size {
case AvatarSizeSmall:
return "w-8 h-8 text-xs"
case AvatarSizeLarge:
return "w-16 h-16 text-xl"
default:
return "w-12 h-12 text-base"
}
}
With Sizes
package showcase
import "github.com/axzilla/templui/pkg/components"
templ AvatarWithSizes() {
<div class="flex flex-wrap gap-2">
@components.Avatar(components.AvatarProps{
ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
Name: "John Doe",
Size: components.AvatarSizeSmall,
Class: "border-2 border-border",
})
@components.Avatar(components.AvatarProps{
ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
Name: "John Doe",
Class: "border-2 border-border",
})
@components.Avatar(components.AvatarProps{
ImageSrc: "https://avatars.githubusercontent.com/u/26936893?v=4",
Name: "John Doe",
Size: components.AvatarSizeLarge,
Class: "border-2 border-border",
})
</div>
}
package components
import (
"fmt"
"github.com/axzilla/templui/pkg/utils"
"strings"
)
type AvatarSize string
const (
AvatarSizeSmall AvatarSize = "small"
AvatarSizeMedium AvatarSize = "medium"
AvatarSizeLarge AvatarSize = "large"
)
type AvatarProps struct {
ImageSrc string // URL of avatar image
Name string // Name for generating initials
Size AvatarSize // Size variant
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Avatar renders a user avatar image or initials
templ Avatar(props AvatarProps) {
<div
class={ utils.TwMerge(
// Layout
"inline-flex items-center justify-center",
avatarSizeClasses(props.Size),
// Styling
"rounded-full bg-muted",
// Custom
props.Class,
) }
{ props.Attributes... }
>
if props.ImageSrc != "" {
<img
src={ props.ImageSrc }
alt={ fmt.Sprintf("%s's avatar", props.Name) }
class={ utils.TwMerge(
// Layout
"w-full h-full",
// Styling
"rounded-full object-cover",
) }
/>
} else {
<span
class={ utils.TwMerge(
// Styling
"font-medium text-muted-foreground",
) }
>
{ avatarInitials(props.Name) }
</span>
}
</div>
}
func avatarInitials(name string) string {
parts := strings.Fields(name)
initials := ""
for i, part := range parts {
if i > 1 {
break
}
if len(part) > 0 {
initials += string(part[0])
}
}
return strings.ToUpper(initials)
}
func avatarSizeClasses(size AvatarSize) string {
switch size {
case AvatarSizeSmall:
return "w-8 h-8 text-xs"
case AvatarSizeLarge:
return "w-16 h-16 text-xl"
default:
return "w-12 h-12 text-base"
}
}