docs(command-palette): update

docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue

@@ -1,40 +1,68 @@
 <script setup lang="ts">
 const groups = [{
   id: 'settings',
-  items: [{
-    label: 'Profile',
-    icon: 'i-heroicons-user',
-    kbds: ['meta', 'P']
-  }, {
-    label: 'Billing',
-    icon: 'i-heroicons-credit-card',
-    kbds: ['meta', 'B'],
-    slot: 'billing'
-  }, {
-    label: 'Notifications',
-    icon: 'i-heroicons-bell'
-  }, {
-    label: 'Security',
-    icon: 'i-heroicons-lock-closed'
-  }]
+  items: [
+    {
+      label: 'Profile',
+      icon: 'i-heroicons-user',
+      kbds: ['meta', 'P']
+    },
+    {
+      label: 'Billing',
+      icon: 'i-heroicons-credit-card',
+      kbds: ['meta', 'B'],
+      slot: 'billing'
+    },
+    {
+      label: 'Notifications',
+      icon: 'i-heroicons-bell'
+    },
+    {
+      label: 'Security',
+      icon: 'i-heroicons-lock-closed'
+    }
+  ]
 }, {
   id: 'users',
   label: 'Users',
   slot: 'users',
   items: [
-    { id: 1, label: 'Durward Reynolds' },
-    { id: 2, label: 'Kenton Towne' },
-    { id: 3, label: 'Therese Wunsch' },
-    { id: 4, label: 'Benedict Kessler' },
-    { id: 5, label: 'Katelyn Rohan' }
+    {
+      label: 'Benjamin Canac',
+      suffix: 'benjamincanac'
+    },
+    {
+      label: 'Sylvain Marroufin',
+      suffix: 'smarroufin'
+    },
+    {
+      label: 'Sébastien Chopin',
+      suffix: 'atinux'
+    },
+    {
+      label: 'Romain Hamel',
+      suffix: 'romhml'
+    },
+    {
+      label: 'Haytham A. Salama',
+      suffix: 'Haythamasalama'
+    },
+    {
+      label: 'Daniel Roe',
+      suffix: 'danielroe'
+    },
+    {
+      label: 'Neil Richter',
+      suffix: 'noook'
+    }
   ]
 }]
 </script>
 
 <template>
   <UCommandPalette :groups="groups" class="flex-1 h-80">
-    <template #users-leading="{ index }">
-      <UAvatar :src="`https://i.pravatar.cc/120?img=${index}`" size="2xs" />
+    <template #users-leading="{ item }">
+      <UAvatar :src="`https://github.com/${item.suffix}.png`" size="2xs" />
     </template>
 
     <template #billing-label="{ item }">