"use client"; import type { HTMLAttributes } from "react"; import { useId, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; export type PresenceProfile = { id: string; name: string; role: string; initials: string; status: "online" | "focus" | "offline" }; type ProfilePresenceCardProps = HTMLAttributes & { profiles: PresenceProfile[]; activeId?: string; defaultActiveId?: string; onActiveIdChange?: (id: string) => void; title?: string; reducedMotion?: boolean; }; const statusLabel: Record = { online: "Online", focus: "Focusing", offline: "Offline" }; export function ProfilePresenceCard({ profiles, activeId, defaultActiveId, onActiveIdChange, title = "Team availability", reducedMotion, className = "", ...props }: ProfilePresenceCardProps) { const systemReducedMotion = useReducedMotion(); const reduceMotion = Boolean(reducedMotion || systemReducedMotion); const uid = useId(); const [internalId, setInternalId] = useState(defaultActiveId ?? profiles[0]?.id ?? ""); const selectedId = activeId ?? internalId; const available = profiles.filter((profile) => profile.status !== "offline").length; const select = (id: string) => { if (activeId === undefined) setInternalId(id); onActiveIdChange?.(id); }; return (

{title}

{available} of {profiles.length} available

); }

Design systems team

Design systems team