@a4ui/core 0.34.0 → 0.35.0

package/src/ui/JsonViewer.tsx

@@ -0,0 +1,189 @@
+// Collapsible JSON tree with type-tinted primitive values.
+import { ChevronRight } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createMemo, createSignal, For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Input } from './Input'
+
+export interface JsonViewerProps {
+  /** The value to render — object, array, or a primitive at the root. */
+  data: unknown
+  /** Expand every object/array node on first render. Defaults to `false`. */
+  defaultExpanded?: boolean
+  class?: string
+}
+
+type Entry = { key: string; value: unknown }
+
+function isExpandable(value: unknown): value is Record<string, unknown> | unknown[] {
+  return typeof value === 'object' && value !== null
+}
+
+function entriesOf(value: Record<string, unknown> | unknown[]): Entry[] {
+  return Array.isArray(value)
+    ? value.map((v, i) => ({ key: String(i), value: v }))
+    : Object.entries(value).map(([key, v]) => ({ key, value: v }))
+}
+
+function summaryOf(value: Record<string, unknown> | unknown[]): string {
+  const count = entriesOf(value).length
+  return Array.isArray(value) ? `[${count}]` : `{${count}}`
+}
+
+/** Collects every expandable node's path so `defaultExpanded` can seed them all. */
+function collectPaths(value: unknown, path: string, acc: Set<string>): void {
+  if (!isExpandable(value)) return
+  acc.add(path)
+  for (const { key, value: child } of entriesOf(value)) collectPaths(child, `${path}.${key}`, acc)
+}
+
+function valueClass(value: unknown): string {
+  if (value === null) return 'text-muted-foreground'
+  switch (typeof value) {
+    case 'string':
+      return 'text-accent'
+    case 'number':
+      return 'text-primary'
+    case 'boolean':
+      return 'text-secondary-foreground'
+    default:
+      return 'text-foreground'
+  }
+}
+
+function formatPrimitive(value: unknown): string {
+  return typeof value === 'string' ? `"${value}"` : String(value)
+}
+
+function matches(entry: Entry, query: string): boolean {
+  if (entry.key.toLowerCase().includes(query)) return true
+  if (isExpandable(entry.value)) return entriesOf(entry.value).some((e) => matches(e, query))
+  return formatPrimitive(entry.value).toLowerCase().includes(query)
+}
+
+/**
+ * Collapsible, indented JSON tree. Objects/arrays are expandable nodes (chevron
+ * + key + a `{…}` / `[…]` summary with child count); primitives render as
+ * `key: value` with the value tinted by type. Expanded state is tracked
+ * internally by path, seeded fully-open when `defaultExpanded` is set. An
+ * optional search box highlights keys/values that match.
+ *
+ * @example
+ * ```tsx
+ * <JsonViewer
+ *   defaultExpanded
+ *   data={{ user: { id: 1, name: 'Ada', active: true, tags: ['admin', 'core'] } }}
+ * />
+ * ```
+ */
+export function JsonViewer(props: JsonViewerProps): JSX.Element {
+  const [expanded, setExpanded] = createSignal<Set<string>>(seedExpanded())
+  const [query, setQuery] = createSignal('')
+
+  function seedExpanded(): Set<string> {
+    if (!props.defaultExpanded) return new Set()
+    const acc = new Set<string>()
+    collectPaths(props.data, '$', acc)
+    return acc
+  }
+
+  const toggle = (path: string) =>
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      if (next.has(path)) next.delete(path)
+      else next.add(path)
+      return next
+    })
+
+  const normalizedQuery = createMemo(() => query().trim().toLowerCase())
+
+  const highlight = (text: string): JSX.Element => {
+    const q = normalizedQuery()
+    if (!q) return <>{text}</>
+    const i = text.toLowerCase().indexOf(q)
+    if (i === -1) return <>{text}</>
+    return (
+      <>
+        {text.slice(0, i)}
+        <mark class="bg-accent/30 text-inherit">{text.slice(i, i + q.length)}</mark>
+        {text.slice(i + q.length)}
+      </>
+    )
+  }
+
+  const Node = (nodeProps: { entry: Entry; path: string; depth: number }): JSX.Element => {
+    const value = () => nodeProps.entry.value
+    const path = () => nodeProps.path
+    const q = normalizedQuery()
+    const visible = createMemo(() => !q || matches(nodeProps.entry, q))
+
+    return (
+      <Show when={visible()}>
+        <li style={{ 'padding-left': `${nodeProps.depth * 1}rem` }}>
+          <Show
+            when={isExpandable(value())}
+            fallback={
+              <div class="flex items-baseline gap-1 py-0.5">
+                <span class="w-3.5 shrink-0" aria-hidden="true" />
+                <span class="text-foreground">{highlight(nodeProps.entry.key)}:</span>
+                <span class={valueClass(value())}>{highlight(formatPrimitive(value()))}</span>
+              </div>
+            }
+          >
+            {(() => {
+              const container = value() as Record<string, unknown> | unknown[]
+              const isOpen = () => expanded().has(path())
+              return (
+                <>
+                  <div
+                    class="flex items-baseline gap-1 py-0.5 cursor-pointer rounded hover:bg-muted"
+                    onClick={() => toggle(path())}
+                  >
+                    <ChevronRight
+                      class={cn(
+                        'h-3.5 w-3.5 shrink-0 self-center transition-transform duration-150',
+                        isOpen() && 'rotate-90',
+                      )}
+                      aria-hidden="true"
+                    />
+                    <span class="text-foreground">{highlight(nodeProps.entry.key)}:</span>
+                    <span class="text-muted-foreground">{summaryOf(container)}</span>
+                  </div>
+                  <Show when={isOpen()}>
+                    <ul>
+                      <For each={entriesOf(container)}>
+                        {(child) => (
+                          <Node entry={child} path={`${path()}.${child.key}`} depth={nodeProps.depth + 1} />
+                        )}
+                      </For>
+                    </ul>
+                  </Show>
+                </>
+              )
+            })()}
+          </Show>
+        </li>
+      </Show>
+    )
+  }
+
+  const rootEntries = createMemo<Entry[]>(() =>
+    isExpandable(props.data) ? entriesOf(props.data) : [{ key: '$', value: props.data }],
+  )
+
+  return (
+    <div class={cn('font-mono text-sm whitespace-pre', props.class)}>
+      <Input
+        value={query()}
+        onInput={setQuery}
+        placeholder="Search keys/values…"
+        class="mb-2 font-sans text-sm"
+        aria-label="Search JSON"
+      />
+      <ul>
+        <For each={rootEntries()}>{(entry) => <Node entry={entry} path={`$.${entry.key}`} depth={0} />}</For>
+      </ul>
+    </div>
+  )
+}

package/src/ui/LocationPicker.tsx

@@ -0,0 +1,96 @@
+// A form field pairing a free-text label with an InteractiveMap: click (or
+// drag-release) on the map to drop the pin, or use the browser's geolocation
+// to jump straight to the user's position. Controlled (`value`/`onChange`) or
+// uncontrolled (internal signal, seeded once from `value`).
+import { Crosshair } from 'lucide-solid'
+import { createSignal, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Button } from './Button'
+import { InteractiveMap, type MapMarker } from './InteractiveMap'
+
+export interface LocationValue {
+  lat: number
+  lng: number
+  label?: string
+}
+
+export interface LocationPickerProps {
+  /** Controlled value. Omit to let the component manage its own state. */
+  value?: LocationValue
+  /** Fires with the full value whenever the label, the pin, or geolocation changes it. */
+  onChange?: (v: LocationValue) => void
+  class?: string
+}
+
+const MAP_ZOOM = 12
+const MAP_HEIGHT = 240
+
+/**
+ * Text label + compact map field for picking a location: click or drag the
+ * map to drop the pin (no geocoding — the label is a free-text tag the caller
+ * attaches to the coordinates), or use the "use my location" button.
+ *
+ * @example
+ * ```tsx
+ * const [place, setPlace] = createSignal<LocationValue>({ lat: 48.8584, lng: 2.2945, label: 'Eiffel Tower' })
+ * <LocationPicker value={place()} onChange={setPlace} />
+ * ```
+ */
+export function LocationPicker(props: LocationPickerProps): JSX.Element {
+  const [internal, setInternal] = createSignal<LocationValue>(props.value ?? { lat: 0, lng: 0 })
+
+  // Controlled when `value` is passed (read fresh every time, like a normal
+  // controlled input); falls back to internal state otherwise.
+  const current = (): LocationValue => props.value ?? internal()
+
+  const emit = (next: LocationValue): void => {
+    setInternal(next)
+    props.onChange?.(next)
+  }
+
+  const setCoord = (coord: { lat: number; lng: number }): void => {
+    emit({ ...current(), lat: coord.lat, lng: coord.lng })
+  }
+
+  const setLabel = (label: string): void => {
+    emit({ ...current(), label })
+  }
+
+  const useMyLocation = (): void => {
+    if (typeof navigator === 'undefined' || !navigator.geolocation) return
+    navigator.geolocation.getCurrentPosition(
+      (position) => setCoord({ lat: position.coords.latitude, lng: position.coords.longitude }),
+      (error) => console.error('LocationPicker: geolocation failed', error),
+    )
+  }
+
+  const pin = (): MapMarker[] => {
+    const { lat, lng, label } = current()
+    return [{ lat, lng, label: label || undefined, id: 'picked' }]
+  }
+
+  return (
+    <div class={cn('flex flex-col gap-2', props.class)}>
+      <div class="flex gap-2">
+        <input
+          type="text"
+          value={current().label ?? ''}
+          onInput={(event) => setLabel(event.currentTarget.value)}
+          placeholder="Location label"
+          class="h-9 flex-1 rounded-md border border-border bg-input px-3 text-sm text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:outline-none"
+        />
+        <Button variant="outline" aria-label="Use my location" onClick={useMyLocation}>
+          <Crosshair class="h-4 w-4" />
+        </Button>
+      </div>
+      <InteractiveMap
+        center={{ lat: current().lat, lng: current().lng }}
+        zoom={MAP_ZOOM}
+        height={MAP_HEIGHT}
+        markers={pin()}
+        onClick={setCoord}
+      />
+    </div>
+  )
+}

package/src/ui/MaskedInput.tsx

@@ -0,0 +1,108 @@
+import type { JSX } from 'solid-js'
+import { createEffect, createSignal, splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+const INPUT_BASE =
+  'w-full rounded-md border border-border bg-card text-foreground placeholder:text-muted-foreground px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50'
+
+export interface MaskedInputProps {
+  /** `#` = digit slot, `A` = letter slot, any other char is a literal, e.g. `'(###) ###-####'`. */
+  mask: string
+  /** Controlled raw value (just the entered #/A characters, no literals). */
+  value?: string
+  /** Called with `(raw, formatted)` on every accepted keystroke or paste. */
+  onInput?: (raw: string, formatted: string) => void
+  placeholder?: string
+  class?: string
+  'aria-label'?: string
+}
+
+const matchesSlot = (mask: string, i: number, char: string): boolean => {
+  const slot = mask[i]
+  if (slot === '#') return /[0-9]/.test(char)
+  if (slot === 'A') return /[a-zA-Z]/.test(char)
+  return false
+}
+
+const isLiteral = (mask: string, i: number): boolean => mask[i] !== '#' && mask[i] !== 'A'
+
+/** Build the formatted string for a mask given only the raw slot characters. */
+const format = (mask: string, raw: string): string => {
+  let out = ''
+  let r = 0
+  for (let i = 0; i < mask.length && r < raw.length; i++) {
+    if (isLiteral(mask, i)) {
+      out += mask[i]
+      continue
+    }
+    out += raw[r]
+    r++
+  }
+  return out
+}
+
+/** Extract the raw #/A characters a formatted string carries, validating each against its slot. */
+const extractRaw = (mask: string, formatted: string): string => {
+  let raw = ''
+  let m = 0
+  for (const char of formatted) {
+    while (m < mask.length && isLiteral(mask, m)) m++
+    if (m >= mask.length) break
+    if (matchesSlot(mask, m, char)) {
+      raw += char
+      m++
+    }
+  }
+  return raw
+}
+
+/**
+ * Format-as-you-type input over a real `<input>`. `mask` uses `#` for a digit
+ * slot and `A` for a letter slot; any other character is a literal inserted
+ * automatically as the user reaches it. Characters that don't fit the next
+ * slot are rejected, and pasted text is normalized by re-extracting only its
+ * valid #/A characters. Controlled (`value`) or uncontrolled.
+ *
+ * @example
+ * ```tsx
+ * const [phone, setPhone] = createSignal('')
+ * <MaskedInput mask="(###) ###-####" value={phone()} onInput={setPhone} placeholder="(555) 123-4567" />
+ * ```
+ */
+export function MaskedInput(props: MaskedInputProps): JSX.Element {
+  const [local] = splitProps(props, ['mask', 'value', 'onInput', 'placeholder', 'class', 'aria-label'])
+
+  const maxRaw = () => local.mask.split('').filter((c) => c === '#' || c === 'A').length
+
+  const [raw, setRaw] = createSignal(extractRaw(local.mask, local.value ?? '').slice(0, maxRaw()))
+
+  createEffect(() => {
+    if (local.value !== undefined) setRaw(extractRaw(local.mask, local.value).slice(0, maxRaw()))
+  })
+
+  const emit = (nextRaw: string) => {
+    setRaw(nextRaw)
+    local.onInput?.(nextRaw, format(local.mask, nextRaw))
+  }
+
+  const handleInput = (ev: InputEvent & { currentTarget: HTMLInputElement }) => {
+    const typedFormatted = ev.currentTarget.value
+    // Re-derive raw from the full field value so pasted or IME text is
+    // normalized the same way as single keystrokes.
+    const nextRaw = extractRaw(local.mask, typedFormatted).slice(0, maxRaw())
+    emit(nextRaw)
+  }
+
+  return (
+    <input
+      class={cn(INPUT_BASE, local.class)}
+      type="text"
+      inputMode="text"
+      placeholder={local.placeholder ?? local.mask}
+      value={format(local.mask, raw())}
+      onInput={handleInput}
+      aria-label={local['aria-label']}
+    />
+  )
+}

package/src/ui/OtpInput.tsx

@@ -0,0 +1,153 @@
+import type { JSX } from 'solid-js'
+import { createEffect, createSignal, For, splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+const BOX_BASE =
+  'h-11 w-10 rounded-md border border-border bg-card text-center text-lg font-medium text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50'
+
+export interface OtpInputProps {
+  /** Number of single-character boxes. @default 6 */
+  length?: number
+  /** Controlled value; when provided, the group renders it and the parent owns state. */
+  value?: string
+  /** Called with the full joined value on every box change (both typing and deletion). */
+  onInput?: (value: string) => void
+  /** Called once with the full value when every box is filled. */
+  onComplete?: (value: string) => void
+  /** Restrict input to digits and switch the mobile keyboard to numeric. */
+  numeric?: boolean
+  class?: string
+  'aria-label'?: string
+}
+
+/**
+ * Segmented one-time-passcode input: one `<input maxlength=1>` per character.
+ * Typing advances focus to the next box, Backspace on an empty box moves back
+ * and clears the previous one, arrow keys move focus, and pasting a string
+ * distributes its characters across boxes starting at the focused index.
+ * Works controlled (pass `value`) or uncontrolled.
+ *
+ * @example
+ * ```tsx
+ * const [code, setCode] = createSignal('')
+ * <OtpInput length={6} value={code()} onInput={setCode} numeric onComplete={verify} />
+ * ```
+ */
+export function OtpInput(props: OtpInputProps): JSX.Element {
+  const [local] = splitProps(props, [
+    'length',
+    'value',
+    'onInput',
+    'onComplete',
+    'numeric',
+    'class',
+    'aria-label',
+  ])
+  const length = () => local.length ?? 6
+
+  const toChars = (v: string) => {
+    const chars = v.slice(0, length()).split('')
+    return Array.from({ length: length() }, (_, i) => chars[i] ?? '')
+  }
+
+  const [chars, setChars] = createSignal<string[]>(toChars(local.value ?? ''))
+  const inputs: (HTMLInputElement | undefined)[] = []
+
+  createEffect(() => {
+    if (local.value !== undefined) setChars(toChars(local.value))
+  })
+
+  const emit = (next: string[]) => {
+    setChars(next)
+    const joined = next.join('')
+    local.onInput?.(joined)
+    if (next.every((c) => c !== '')) local.onComplete?.(joined)
+  }
+
+  const isValidChar = (c: string) => (local.numeric ? /^[0-9]$/.test(c) : c.length === 1)
+
+  const handleInput = (index: number, raw: string) => {
+    // Take the last typed character in case the box already held one.
+    const typed = raw.slice(-1)
+    if (typed === '') {
+      const next = [...chars()]
+      next[index] = ''
+      emit(next)
+      return
+    }
+    if (!isValidChar(typed)) {
+      // Revert the DOM to the last known-good value for this box.
+      const el = inputs[index]
+      if (el) el.value = chars()[index] ?? ''
+      return
+    }
+    const next = [...chars()]
+    next[index] = typed
+    emit(next)
+    if (index < length() - 1) inputs[index + 1]?.focus()
+  }
+
+  const handleKeyDown = (index: number, ev: KeyboardEvent) => {
+    if (ev.key === 'Backspace') {
+      if (chars()[index] === '' && index > 0) {
+        ev.preventDefault()
+        const next = [...chars()]
+        next[index - 1] = ''
+        emit(next)
+        inputs[index - 1]?.focus()
+      }
+      return
+    }
+    if (ev.key === 'ArrowLeft' && index > 0) {
+      ev.preventDefault()
+      inputs[index - 1]?.focus()
+      return
+    }
+    if (ev.key === 'ArrowRight' && index < length() - 1) {
+      ev.preventDefault()
+      inputs[index + 1]?.focus()
+    }
+  }
+
+  const handlePaste = (index: number, ev: ClipboardEvent) => {
+    ev.preventDefault()
+    const pasted = ev.clipboardData?.getData('text') ?? ''
+    const valid = pasted.split('').filter(isValidChar)
+    if (valid.length === 0) return
+    const next = [...chars()]
+    let last = index
+    for (let i = 0; i < valid.length && index + i < length(); i++) {
+      next[index + i] = valid[i]
+      last = index + i
+    }
+    emit(next)
+    inputs[Math.min(last + 1, length() - 1)]?.focus()
+  }
+
+  return (
+    <div
+      role="group"
+      aria-label={local['aria-label'] ?? 'One-time passcode'}
+      class={cn('flex gap-2', local.class)}
+    >
+      <For each={chars()}>
+        {(char, index) => (
+          <input
+            ref={(el) => (inputs[index()] = el)}
+            class={BOX_BASE}
+            type="text"
+            inputMode={local.numeric ? 'numeric' : 'text'}
+            maxlength={1}
+            autocomplete="one-time-code"
+            value={char}
+            onInput={(ev) => handleInput(index(), ev.currentTarget.value)}
+            onKeyDown={(ev) => handleKeyDown(index(), ev)}
+            onPaste={(ev) => handlePaste(index(), ev)}
+            aria-label={`Digit ${index() + 1} of ${length()}`}
+          />
+        )}
+      </For>
+    </div>
+  )
+}

package/src/ui/PresenceAvatars.tsx

@@ -0,0 +1,142 @@
+// Multiplayer presence: a stacked avatar group (same overlap idiom as
+// AvatarGroup) of active users with an online dot, plus optional data-driven
+// remote cursors positioned within the caller's own relative canvas wrapper.
+// Distinct from the decorative FollowingPointer, which follows the LOCAL
+// pointer — these render OTHER users' server-driven positions.
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Avatar } from './Avatar'
+
+/** A user currently present/active in a collaborative session. */
+export interface PresenceUser {
+  id: string
+  name: string
+  avatar?: string
+  /** Accent for this user's remote cursor label. Falls back to the primary token. */
+  color?: string
+}
+
+/** A remote user's pointer position, as fractions of the shared canvas. */
+export interface RemoteCursor {
+  userId: string
+  /** 0..1 fraction of the container's width. */
+  x: number
+  /** 0..1 fraction of the container's height. */
+  y: number
+}
+
+export interface PresenceAvatarsProps {
+  users: PresenceUser[]
+  /** Max avatars shown before collapsing the rest into `+N`. @default 4 */
+  max?: number
+  /**
+   * Remote cursors to render. Positioned absolutely against the nearest
+   * `relative` ancestor, so the caller wraps its canvas/surface with
+   * `class="relative"` for the cursors to anchor to — this component itself
+   * does not create that positioning context.
+   */
+  cursors?: RemoteCursor[]
+  class?: string
+}
+
+function initials(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join('')
+}
+
+/**
+ * Stacked avatar group of users active in a collaborative session, each with
+ * a small online dot and a name tooltip; overflow past `max` (default 4)
+ * collapses into a trailing `+N` chip, mirroring {@link AvatarGroup}. When
+ * `cursors` is given, also renders labeled remote cursors — a small arrow
+ * plus a name chip tinted with the user's `color` — positioned at `x`/`y`
+ * fractions of the nearest `relative` ancestor and animated smoothly as
+ * positions update.
+ *
+ * @example
+ * ```tsx
+ * <div class="relative h-64 w-full overflow-hidden rounded-lg border">
+ *   <PresenceAvatars
+ *     class="absolute right-3 top-3"
+ *     users={[
+ *       { id: 'u1', name: 'Ada Lovelace' },
+ *       { id: 'u2', name: 'Grace Hopper', color: 'hsl(280 80% 60%)' },
+ *     ]}
+ *     cursors={[{ userId: 'u2', x: 0.42, y: 0.6 }]}
+ *   />
+ * </div>
+ * ```
+ */
+export function PresenceAvatars(props: PresenceAvatarsProps): JSX.Element {
+  const max = () => props.max ?? 4
+  const shown = () => props.users.slice(0, max())
+  const overflow = () => props.users.length - shown().length
+  const cursorUser = (userId: string) => props.users.find((user) => user.id === userId)
+
+  return (
+    <>
+      <div class={cn('flex items-center', props.class)}>
+        <For each={shown()}>
+          {(user, index) => (
+            <div
+              class={cn('relative rounded-full ring-2 ring-background', index() > 0 && '-ml-2')}
+              title={user.name}
+            >
+              <Avatar src={user.avatar} alt={user.name} fallback={initials(user.name)} />
+              <span
+                aria-hidden="true"
+                class="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-emerald-500 ring-2 ring-background"
+              />
+            </div>
+          )}
+        </For>
+        <Show when={overflow() > 0}>
+          <div class="-ml-2 rounded-full ring-2 ring-background">
+            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
+              +{overflow()}
+            </span>
+          </div>
+        </Show>
+      </div>
+      <Show when={props.cursors && props.cursors.length > 0}>
+        <div class="pointer-events-none absolute inset-0 z-50 overflow-hidden">
+          <For each={props.cursors}>
+            {(cursor) => {
+              const user = () => cursorUser(cursor.userId)
+              const color = () => user()?.color ?? 'hsl(var(--primary))'
+              return (
+                <Show when={user()}>
+                  <div
+                    class="absolute flex -translate-x-0.5 -translate-y-0.5 items-center transition-[left,top] duration-150 ease-out will-change-[left,top]"
+                    style={{ left: `${cursor.x * 100}%`, top: `${cursor.y * 100}%` }}
+                  >
+                    <svg width="18" height="18" viewBox="0 0 20 20" class="drop-shadow">
+                      <path
+                        d="M2 2 L18 9 L10 11 L8 18 Z"
+                        fill={color()}
+                        stroke="hsl(var(--background))"
+                        stroke-width="1"
+                      />
+                    </svg>
+                    <span
+                      class="ml-1.5 whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium text-white shadow"
+                      style={{ 'background-color': color() }}
+                    >
+                      {user()!.name}
+                    </span>
+                  </div>
+                </Show>
+              )
+            }}
+          </For>
+        </div>
+      </Show>
+    </>
+  )
+}