@@ -0,0 +1,86 @@
1+<script setup lang="ts">
2+import type { UserProps } from '@nuxt/ui'
3+4+const members: UserProps[] = [
5+ {
6+ name: 'Daniel Roe',
7+ description: 'danielroe',
8+ to: 'https://github.com/danielroe',
9+ target: '_blank',
10+ avatar: {
11+ src: 'https://github.com/danielroe.png',
12+ alt: 'danielroe'
13+ }
14+ },
15+ {
16+ name: 'Pooya Parsa',
17+ description: 'pi0',
18+ to: 'https://github.com/pi0',
19+ target: '_blank',
20+ avatar: {
21+ src: 'https://github.com/pi0.png',
22+ alt: 'pi0'
23+ }
24+ },
25+ {
26+ name: 'Sébastien Chopin',
27+ description: 'atinux',
28+ to: 'https://github.com/atinux',
29+ target: '_blank',
30+ avatar: {
31+ src: 'https://github.com/atinux.png',
32+ alt: 'atinux'
33+ }
34+ },
35+ {
36+ name: 'Benjamin Canac',
37+ description: 'benjamincanac',
38+ to: 'https://github.com/benjamincanac',
39+ target: '_blank',
40+ avatar: {
41+ src: 'https://github.com/benjamincanac.png',
42+ alt: 'benjamincanac'
43+ }
44+ }
45+]
46+</script>
47+48+<template>
49+<UEmpty
50+ title="No team members"
51+ description="Invite your team to collaborate on this project."
52+ variant="naked"
53+ :actions="[{
54+ label: 'Invite members',
55+ icon: 'i-lucide-user-plus',
56+ color: 'neutral'
57+ }]"
58+>
59+<template #leading>
60+<UAvatarGroup size="xl">
61+<UAvatar src="https://github.com/nuxt.png" alt="Nuxt" />
62+<UAvatar src="https://github.com/unjs.png" alt="Unjs" />
63+</UAvatarGroup>
64+</template>
65+66+<template #footer>
67+<USeparator class="my-4" />
68+69+<div class="grid grid-cols-2 gap-4">
70+<UPageCard
71+v-for="(member, index) in members"
72+ :key="index"
73+ :to="member.to"
74+ :ui="{ container: 'sm:p-4' }"
75+>
76+<UUser
77+ :avatar="member.avatar"
78+ :name="member.name"
79+ :description="member.description"
80+ :ui="{ name: 'truncate' }"
81+ />
82+</UPageCard>
83+</div>
84+</template>
85+</UEmpty>
86+</template>