Realtime Avatar Stack

1<script setup lang="ts">
2import { computed } from 'vue'
3 
4  // @ts-ignore
5import AvatarStack from '@/components/avatar-stack.vue'
6import { useRealtimePresenceRoom } from '../composables/useRealtimePresenceRoom'
7 
8const props = defineProps<{
9  roomName: string
10}>()
11 
12const { users: usersMap } = useRealtimePresenceRoom(props.roomName)
13 
14const avatars = computed(() =>
15  Object.values(usersMap.value).map((user) => ({
16    name: user.name,
17    image: user.image,
18  }))
19)
20</script>
21 
22<template>
23  <AvatarStack :avatars="avatars" />
24</template>