DiscordWidget.astro

---
import {
  countMembersByStatus,
  formatPresenceCount,
  sortMembersByStatus,
} from "../../lib/discordWidget";
import type { DiscordWidgetData } from "../../schemas/discordWidget";
import DiscordCTA from "./DiscordCTA.astro";

interface Props {
  widget: DiscordWidgetData | null;
  inviteUrl: string;
}

const { widget, inviteUrl } = Astro.props;

const statusDot = {
  online: "bg-mod",
  idle: "bg-admin",
  dnd: "bg-red-500",
  offline: "bg-ink-muted",
} as const;

const displayedMembers = widget
  ? sortMembersByStatus(widget.members).slice(0, 12)
  : [];
const statusCounts = widget ? countMembersByStatus(widget.members) : null;
const joinUrl = widget?.instant_invite ?? inviteUrl;
const sortedChannels = widget
  ? [...widget.channels].sort((a, b) => a.position - b.position)
  : [];
console.log(sortedChannels);
---

<section
  class="border-b border-border bg-surface py-16 sm:py-20"
  aria-labelledby="discord-widget-heading"
>
  <div class="mx-auto max-w-6xl px-4 sm:px-6">
    <div class="mx-auto max-w-3xl text-center">
      <h2
        id="discord-widget-heading"
        class="text-2xl font-bold tracking-tight text-ink sm:text-3xl"
      >
        See who's online
      </h2>
      <p class="mt-3 text-ink-muted">
        Live from the server — members hanging out right now.
      </p>
    </div>

    {
      widget ? (
        <div class="mx-auto mt-10 max-w-2xl overflow-hidden rounded-xl border border-border bg-surface-elevated shadow-lg">
          <div class="h-1 w-full pride-border" aria-hidden="true" />

          <div class="border-b border-border px-5 py-4 sm:px-6">
            <div class="flex flex-wrap items-center justify-between gap-4">
              <div class="text-left">
                <p class="text-xs font-semibold uppercase tracking-wider text-admin">
                  {widget.name}
                </p>
                <p class="mt-1 flex items-center gap-2 text-2xl font-bold text-ink">
                  <span class="relative flex h-3 w-3" aria-hidden="true">
                    <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-mod opacity-40" />
                    <span class="relative inline-flex h-3 w-3 rounded-full bg-mod" />
                  </span>
                  {formatPresenceCount(widget.presence_count)} online
                </p>
              </div>
              {statusCounts && (
                <dl class="flex flex-wrap gap-3 text-xs text-ink-muted">
                  <div class="flex items-center gap-1.5">
                    <span
                      class={`h-2 w-2 rounded-full ${statusDot.online}`}
                      aria-hidden="true"
                    />
                    <dt class="sr-only">Online</dt>
                    <dd>{statusCounts.online} active</dd>
                  </div>
                  <div class="flex items-center gap-1.5">
                    <span
                      class={`h-2 w-2 rounded-full ${statusDot.idle}`}
                      aria-hidden="true"
                    />
                    <dt class="sr-only">Idle</dt>
                    <dd>{statusCounts.idle} idle</dd>
                  </div>
                  <div class="flex items-center gap-1.5">
                    <span
                      class={`h-2 w-2 rounded-full ${statusDot.dnd}`}
                      aria-hidden="true"
                    />
                    <dt class="sr-only">Do not disturb</dt>
                    <dd>{statusCounts.dnd} busy</dd>
                  </div>
                </dl>
              )}
            </div>
          </div>

          {sortedChannels.length > 0 && (
            <div class="border-b border-border px-5 py-4 sm:px-6">
              <h3 class="text-left text-xs font-semibold uppercase tracking-wider text-ink-muted">
                Open channels
              </h3>
              <ul class="mt-3 flex flex-wrap gap-2">
                {sortedChannels.map((channel) => (
                  <li>
                    <span class="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface px-3 py-1 text-sm text-ink-muted">
                      <span aria-hidden="true">🔊</span>
                      {channel.name}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          )}

          <div class="px-5 py-4 sm:px-6">
            <h3 class="text-left text-xs font-semibold uppercase tracking-wider text-ink-muted">
              Members in the lounge
            </h3>
            <ul class="mt-3 grid gap-2 sm:grid-cols-2">
              {displayedMembers.map((member) => {
                const status = member.status ?? "offline";
                return (
                  <li class="flex items-center gap-3 rounded-lg border border-border bg-surface px-3 py-2">
                    <span class="relative shrink-0">
                      <img
                        src={member.avatar_url}
                        alt=""
                        width="36"
                        height="36"
                        class="h-9 w-9 rounded-full"
                        loading="lazy"
                      />
                      <span
                        class:list={[
                          "absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-surface",
                          statusDot[status],
                        ]}
                        aria-hidden="true"
                      />
                    </span>
                    <div class="min-w-0 text-left">
                      <p class="truncate text-sm font-medium text-ink">
                        {member.username}
                      </p>
                      {member.game && (
                        <p class="truncate text-xs text-ink-muted">
                          Playing {member.game.name}
                        </p>
                      )}
                    </div>
                  </li>
                );
              })}
            </ul>
            {widget.members.length > displayedMembers.length && (
              <p class="mt-3 text-center text-sm text-ink-muted">
                +{widget.members.length - displayedMembers.length} more in the
                lounge
              </p>
            )}
          </div>

          <div class="border-t border-border bg-surface px-5 py-4 text-center sm:px-6">
            <DiscordCTA href={joinUrl} />
          </div>
        </div>
      ) : (
        <div class="mx-auto mt-10 max-w-md rounded-xl border border-border bg-surface-elevated px-6 py-8 text-center">
          <p class="text-ink-muted">
            Couldn't load live server data right now.
          </p>
          <div class="mt-4">
            <DiscordCTA href={inviteUrl} />
          </div>
        </div>
      )
    }
  </div>
</section>