55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<template>
|
|
<div class="flex items-center gap-3 py-3">
|
|
<PrimeAvatar icon="pi pi-user" size="small" />
|
|
|
|
<div class="flex-1">
|
|
<div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
|
|
{{ client.username }}
|
|
</div>
|
|
<div class="mt-1 text-xs leading-5 text-muted-color">
|
|
{{ client.id }}
|
|
</div>
|
|
</div>
|
|
|
|
<PrimeBadge severity="secondary" value="Muted" />
|
|
|
|
<PrimeButton icon="pi pi-ellipsis-h" text size="small" @click="menuRef?.toggle" />
|
|
|
|
<PrimeMenu ref="menu" popup :model="menuItems" style="translate: calc(-100% + 2rem) 0.5rem">
|
|
<template #start>
|
|
<div class="px-4 py-3">
|
|
<div class="flex justify-between">
|
|
<span>Volume</span>
|
|
<span>{{ volume }}</span>
|
|
</div>
|
|
<PrimeSlider v-model="volume" class="mt-4" :min="0" :max="100" :step="5" />
|
|
</div>
|
|
</template>
|
|
</PrimeMenu>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Client } from '#shared/types'
|
|
import type { MenuItem } from 'primevue/menuitem'
|
|
|
|
defineProps<{
|
|
client: Client
|
|
}>()
|
|
|
|
const menuRef = useTemplateRef('menu')
|
|
const volume = ref(100)
|
|
|
|
const menuItems: MenuItem[] = [
|
|
{
|
|
label: 'Mute',
|
|
icon: 'pi pi-headphones',
|
|
},
|
|
{
|
|
label: 'DM',
|
|
icon: 'pi pi-comment',
|
|
disabled: true,
|
|
},
|
|
]
|
|
</script>
|