29 lines
918 B
Vue
29 lines
918 B
Vue
<template>
|
|
<Menu title="User" :options="[{ title: 'Logout' }]">
|
|
<template #trigger>
|
|
<MenuButton
|
|
class="flex flex-row items-center space-x-2 rounded-full px-1 py-1 pr-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<div
|
|
class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-gray-200"
|
|
>
|
|
<UserIcon class="h-5 w-5" />
|
|
</div>
|
|
<span>{{ user.name }}</span>
|
|
<ChevronDownIcon class="ml-2 h-5 w-5" />
|
|
</MenuButton>
|
|
</template>
|
|
</Menu>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { MenuButton } from '@headlessui/vue';
|
|
import { ChevronDownIcon, UserIcon } from '@heroicons/vue/24/outline';
|
|
import { User } from '../../interfaces/user.interfaces';
|
|
import Menu from '../menu/Menu.vue';
|
|
|
|
const props = defineProps<{
|
|
user: User;
|
|
}>();
|
|
</script>
|