Compact team list where one member at a time changes presence: dots recolor, status text fades in, and the online count in the header keeps pace.
The import and the props worth knowing about, in one place.
import { Chat39 } from "@/components/beste/piece/chat39";
<Chat39
title="Studio team"
members={[
{
"name": "Nina Simone",
"initials": "NS",
"status": "online"
},
{
"name": "Miles Davis",
"initials": "MD",
"status": "call"
},
{
"name": "Björk",
"initials": "BJ",
"status": "away"
},
{
"name": "Patti Smith",
"initials": "PS",
"status": "online"
}
]}
changes={[
{
"member": 3,
"status": "typing"
},
{
"member": 2,
"status": "online"
},
{
"member": 3,
"status": "online"
},
{
"member": 1,
"status": "online"
},
{
"member": 0,
"status": "away"
},
{
"member": 2,
"status": "typing"
},
{
"member": 2,
"status": "away"
},
{
"member": 0,
"status": "online"
},
{
"member": 1,
"status": "call"
}
]}
bordered={false}
/>