30 lines
1.1 KiB
Plaintext
30 lines
1.1 KiB
Plaintext
import { Avatar, Badge, Card } from "@wrnexus/ui"
|
|
|
|
component PresenceList {
|
|
props {
|
|
members: unknown[] = []
|
|
title: string = "People"
|
|
emptyLabel: string = "No one is online."
|
|
color: string = "primary"
|
|
size: string = "md"
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<Card title='{title}' color='{color}' size='{size}' empty='{members.length == 0}' emptyTitle='{emptyLabel}' class='{class}'>
|
|
<div class="space-y-3">
|
|
{#each members as member}
|
|
<div class="flex items-center gap-3">
|
|
<Avatar src='{member.avatar || ""}' fallback='{member.name || member.userId || "?"}' size="sm" color='{color}' />
|
|
<div class="min-w-0 flex-1">
|
|
<p class="m-0 truncate text-sm font-semibold">{member.name || member.userId}</p>
|
|
<p class="m-0 text-xs text-[var(--wire-color-muted)]">{member.status || "online"}</p>
|
|
</div>
|
|
<Badge label='{member.status || "online"}' color='{member.status == "busy" ? "danger" : member.status == "away" ? "warning" : "success"}' size="sm" variant="soft" />
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</Card>
|
|
}
|
|
}
|