Avatar

// Package avatar holds the site's example gsx components for ui/avatar.
package avatar

import "github.com/gsxhq/gsxui/ui"

// A 64x64 violet tile with white "AL" initials — a stand-in portrait, so
// the loaded-image state is visibly an avatar and visibly distinct from
// the gray fallback. Authored as plain SVG bytes; the `|> dataURL(mime)`
// std filter at the src site assembles the base64 data: URL gsx's
// image-sink sanitizer accepts (see docs/jsx-parity.md ## avatar).
var avatarSVG = []byte("<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><rect width='64' height='64' fill='#6d28d9'/><text x='32' y='34' text-anchor='middle' dominant-baseline='central' font-family='sans-serif' font-weight='600' font-size='26' fill='#fff'>AL</text></svg>")

// Basic renders two Avatars side by side: one whose image loads (a data
// URI), one whose image fails to decode and falls back to initials —
// avatar.js toggles which of image/fallback is visible on the image's
// load/error. The broken one uses an empty-payload data: URI rather than
// a real 404: a data: URI never hits the network, so the img still fires
// its native "error" event (exercising the same fallback path) without
// Chromium logging a "Failed to load resource" console error — which
// would otherwise trip the site-wide clean-console invariant for what is,
// by design, a demonstration of the fallback state rather than a defect.
component Basic() {
	<div class="flex items-center gap-4">
		<ui.Avatar>
			<ui.AvatarImage src={avatarSVG |> dataURL("image/svg+xml")} alt="Ada Lovelace"/>
			<ui.AvatarFallback>AL</ui.AvatarFallback>
		</ui.Avatar>
		<ui.Avatar>
			<ui.AvatarImage src="data:image/png;base64," alt="Broken avatar"/>
			<ui.AvatarFallback>JD</ui.AvatarFallback>
		</ui.Avatar>
	</div>
}

package avatar

import "github.com/gsxhq/gsxui/ui"

// Group renders three overlapping Avatars — a stacked-avatars pattern
// built entirely from attrs (-space-x-2, a ring), no extra component.
component Group() {
	<div class="flex -space-x-2">
		<ui.Avatar class="ring-2 ring-background">
			<ui.AvatarImage src={avatarSVG |> dataURL("image/svg+xml")} alt="Ada Lovelace"/>
			<ui.AvatarFallback>AL</ui.AvatarFallback>
		</ui.Avatar>
		<ui.Avatar class="ring-2 ring-background">
			<ui.AvatarFallback>GH</ui.AvatarFallback>
		</ui.Avatar>
		<ui.Avatar class="ring-2 ring-background">
			<ui.AvatarFallback>AT</ui.AvatarFallback>
		</ui.Avatar>
	</div>
}

package avatar

import "github.com/gsxhq/gsxui/ui"

// Rtl mirrors shadcn's own avatar-rtl demo shape: a loaded avatar, and an
// overlapping group with a "+N" count tile, wrapped in dir="rtl". gsxui
// has no AvatarBadge/AvatarGroup/AvatarGroupCount components (see
// ui/avatar.gsx), so the status-badge avatar is dropped and the group's
// count tile is approximated with a fourth Avatar whose fallback reads
// the Arabic-Indic "+٣" shadcn's own translations table uses for ar.
component Rtl() {
	<div dir="rtl" lang="ar" class="flex flex-row flex-wrap items-center gap-6">
		<ui.Avatar>
			<ui.AvatarImage src={avatarSVG |> dataURL("image/svg+xml")} alt="Ada Lovelace"/>
			<ui.AvatarFallback>AL</ui.AvatarFallback>
		</ui.Avatar>
		<div class="flex -space-x-2">
			<ui.Avatar class="ring-2 ring-background">
				<ui.AvatarImage src={avatarSVG |> dataURL("image/svg+xml")} alt="Ada Lovelace"/>
				<ui.AvatarFallback>AL</ui.AvatarFallback>
			</ui.Avatar>
			<ui.Avatar class="ring-2 ring-background">
				<ui.AvatarFallback>GH</ui.AvatarFallback>
			</ui.Avatar>
			<ui.Avatar class="ring-2 ring-background">
				<ui.AvatarFallback>AT</ui.AvatarFallback>
			</ui.Avatar>
			<ui.Avatar class="ring-2 ring-background">
				<ui.AvatarFallback>{ "+٣" }</ui.AvatarFallback>
			</ui.Avatar>
		</div>
	</div>
}