From b0e0b87c79cb7e66e9c5b5935fd43b7902257e2a Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 17 Jul 2024 16:39:27 +0200
Subject: [PATCH] docs(avatar): update

---
 .../examples/avatar/AvatarChipExample.vue     |  8 ++
 .../examples/avatar/AvatarTooltipExample.vue  |  8 ++
 docs/content/3.components/alert.md            |  2 +-
 docs/content/3.components/avatar.md           | 77 ++++++++++++++++++-
 docs/nuxt.config.ts                           |  1 +
 5 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 docs/app/components/content/examples/avatar/AvatarChipExample.vue
 create mode 100644 docs/app/components/content/examples/avatar/AvatarTooltipExample.vue

diff --git a/docs/app/components/content/examples/avatar/AvatarChipExample.vue b/docs/app/components/content/examples/avatar/AvatarChipExample.vue
new file mode 100644
index 00000000..0611627b
--- /dev/null
+++ b/docs/app/components/content/examples/avatar/AvatarChipExample.vue
@@ -0,0 +1,8 @@
+<template>
+  <UChip inset>
+    <UAvatar
+      src="https://avatars.githubusercontent.com/u/739984?v=4"
+      alt="Benjamin Canac"
+    />
+  </UChip>
+</template>
diff --git a/docs/app/components/content/examples/avatar/AvatarTooltipExample.vue b/docs/app/components/content/examples/avatar/AvatarTooltipExample.vue
new file mode 100644
index 00000000..e93af5cb
--- /dev/null
+++ b/docs/app/components/content/examples/avatar/AvatarTooltipExample.vue
@@ -0,0 +1,8 @@
+<template>
+  <UTooltip text="Benjamin Canac">
+    <UAvatar
+      src="https://avatars.githubusercontent.com/u/739984?v=4"
+      alt="Benjamin Canac"
+    />
+  </UTooltip>
+</template>
diff --git a/docs/content/3.components/alert.md b/docs/content/3.components/alert.md
index 07813fe3..9f5af270 100644
--- a/docs/content/3.components/alert.md
+++ b/docs/content/3.components/alert.md
@@ -67,7 +67,7 @@ Use the `close` prop to display a [Button](/components/button) to dismiss the Al
 A `close` event will be emitted when the close button is clicked.
 ::
 
-Use the `close-icon` prop to customize the close button icon. Defaults to `i-heroicons-x-mark-20-solid`.
+Use the `close-icon` prop to customize this icon. Defaults to `i-heroicons-x-mark-20-solid`.
 
 ::component-code
 ---
diff --git a/docs/content/3.components/avatar.md b/docs/content/3.components/avatar.md
index 1a05308c..a1a5ef34 100644
--- a/docs/content/3.components/avatar.md
+++ b/docs/content/3.components/avatar.md
@@ -1,5 +1,5 @@
 ---
-description: Display an image that represents a resource or a group of resources.
+description: Display an image element with fallback.
 links:
   - label: Avatar
     icon: i-custom-radix-vue
@@ -11,8 +11,83 @@ links:
 
 ## Usage
 
+Use the `src` prop to set the image URL. You can pass any property from HTML `<img>` element such as `alt`, `loading`, etc.
+
+::component-code
+---
+props:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+---
+::
+
+### Size
+
+Use the `size` prop to set the size of the Avatar.
+
+::component-code
+---
+ignore:
+  - src
+props:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  size: md
+---
+::
+
+### Icon
+
+Use the `icon` prop to display a fallback [Icon](/components/icon).
+
+::component-code
+---
+props:
+  icon: 'i-heroicons-photo'
+  size: md
+---
+::
+
+### Text
+
+Use the `text` prop to display a fallback text.
+
+::component-code
+---
+props:
+  text: '+1'
+  size: md
+---
+::
+
+### Alt
+
+When no icon or text is provided, the **initials** of the `alt` prop will be used as fallback.
+
+::component-code
+---
+props:
+  alt: 'Benjamin Canac'
+  size: md
+---
+::
+
+::tip
+The `alt` prop will be used as the `alt` attribute of the image.
+::
+
 ## Examples
 
+### With tooltip
+
+You can use the [Tooltip](/components/tooltip) component to display a tooltip when hovering the Avatar.
+
+:component-example{name="AvatarTooltipExample"}
+
+### With chip
+
+You can use the [Chip](/components/chip) component to display a chip around the Avatar.
+
+:component-example{name="AvatarChipExample"}
+
 ## API
 
 ### Props
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 24d61fbd..2760340c 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -118,6 +118,7 @@ export default defineNuxtConfig({
     'components:extend': (components) => {
       const globals = components.filter(c => [
         'UAlert',
+        'UAvatar',
         'UBadge',
         'UButton',
         'UIcon',