61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { DropdownMenuItem } from '@nuxt/ui'
|
|
import type { Member } from '~/types'
|
|
|
|
defineProps<{
|
|
members: Member[]
|
|
}>()
|
|
|
|
const items = [{
|
|
label: 'Edit member',
|
|
onSelect: () => console.log('Edit member')
|
|
}, {
|
|
label: 'Remove member',
|
|
color: 'error' as const,
|
|
onSelect: () => console.log('Remove member')
|
|
}] satisfies DropdownMenuItem[]
|
|
</script>
|
|
|
|
<template>
|
|
<ul role="list" class="divide-y divide-default">
|
|
<li
|
|
v-for="(member, index) in members"
|
|
:key="index"
|
|
class="flex items-center justify-between gap-3 py-3 px-4 sm:px-6"
|
|
>
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<UAvatar
|
|
v-bind="member.avatar"
|
|
size="md"
|
|
/>
|
|
|
|
<div class="text-sm min-w-0">
|
|
<p class="text-highlighted font-medium truncate">
|
|
{{ member.name }}
|
|
</p>
|
|
<p class="text-muted truncate">
|
|
{{ member.username }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<USelect
|
|
:model-value="member.role"
|
|
:items="['member', 'owner']"
|
|
color="neutral"
|
|
:ui="{ value: 'capitalize', item: 'capitalize' }"
|
|
/>
|
|
|
|
<UDropdownMenu :items="items" :content="{ align: 'end' }">
|
|
<UButton
|
|
icon="i-lucide-ellipsis-vertical"
|
|
color="neutral"
|
|
variant="ghost"
|
|
/>
|
|
</UDropdownMenu>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</template>
|