Initial commit

resources/js/views/demos/components/list/DemoListUserList.vue

@@ -0,0 +1,81 @@
+<script setup>
+import avatar1 from '@images/avatars/avatar-1.png'
+import avatar2 from '@images/avatars/avatar-2.png'
+import avatar3 from '@images/avatars/avatar-3.png'
+import avatar4 from '@images/avatars/avatar-4.png'
+
+const users = [
+  {
+    avatar: avatar1,
+    name: 'Caroline Black',
+    status: 'Online',
+    lastVisited: '13 minutes ago',
+  },
+  {
+    avatar: avatar2,
+    name: 'Alfred Copeland',
+    status: 'Away',
+    lastVisited: '11 minutes ago',
+  },
+  {
+    avatar: avatar3,
+    name: 'Celia Schneider',
+    status: 'Offline',
+    lastVisited: '9 minutes ago',
+  },
+  {
+    avatar: avatar4,
+    name: 'Max Rogan',
+    status: 'In Meeting',
+    lastVisited: '28 minutes ago',
+  },
+]
+
+const resolveStatusColor = {
+  'Online': 'success',
+  'Away': 'warning',
+  'Offline': 'secondary',
+  'In Meeting': 'error',
+}
+</script>
+
+<template>
+  <VList
+    lines="two"
+    border
+  >
+    <template
+      v-for="(user, index) of users"
+      :key="user.name"
+    >
+      <VListItem>
+        <template #prepend>
+          <VAvatar :image="user.avatar" />
+        </template>
+        <VListItemTitle>
+          {{ user.name }}
+        </VListItemTitle>
+        <VListItemSubtitle class="mt-1">
+          <VBadge
+            dot
+            location="start center"
+            offset-x="2"
+            :color="resolveStatusColor[user.status]"
+            class="me-3"
+          >
+            <span class="ms-4">{{ user.status }}</span>
+          </VBadge>
+
+          <span class="text-xs text-disabled">{{ user.lastVisited }}</span>
+        </VListItemSubtitle>
+
+        <template #append>
+          <VBtn size="small">
+            Add
+          </VBtn>
+        </template>
+      </VListItem>
+      <VDivider v-if="index !== users.length - 1" />
+    </template>
+  </VList>
+</template>