feat: add avatar circle component

docs/index.md

@@ -90,3 +90,5 @@ import Demos from './src/components/Demos.vue'
 <demo src="./src/example/particles/Demo.vue" />
 
 <demo src="./src/example/dotPattern/Demo.vue" />
+
+<demo src="./src/example/avatarCircle/Demo.vue" />

docs/src/components/spark-ui/avatarCircle/AvatarCircles.vue

@@ -0,0 +1,33 @@
+<script setup lang='ts'>
+import { cn } from '../../../lib/utils'
+
+interface AvatarCirclesProps {
+  class?: string
+  numPeople?: number
+  avatarUrls: string[]
+}
+
+const props = defineProps<AvatarCirclesProps>()
+
+const className = cn(
+  'z-10 flex -space-x-4 rtl:space-x-reverse',
+  props.class,
+)
+</script>
+
+<template>
+  <div :class="className">
+    <div v-for="(imageUrl, idx) in props.avatarUrls" :key="idx">
+      <img
+        :key="idx" class="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800" :src="imageUrl"
+        :height="40" :width="40" :alt="`Avatar ${idx + 1}`"
+      >
+    </div>
+    <a
+      class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black"
+      href=""
+    >
+      +{{ props.numPeople }}
+    </a>
+  </div>
+</template>

docs/src/example/avatarCircle/AvatarCircles.vue

@@ -0,0 +1,32 @@
+<script setup lang='ts'>
+import { cn } from '../../lib/utils'
+
+interface AvatarCirclesProps {
+  class?: string
+  numPeople?: number
+  avatarUrls: string[]
+}
+
+const props = defineProps<AvatarCirclesProps>()
+
+const className = cn(
+  'z-10 flex -space-x-4 rtl:space-x-reverse',
+  props.class,
+)
+</script>
+
+<template>
+  <div :class="className">
+    <div v-for="(imageUrl, idx) in props.avatarUrls" :key="idx">
+      <img
+        :key="idx" class="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800" :src="imageUrl"
+        :height="40" :width="40" :alt="`Avatar ${idx + 1}`"
+      >
+    </div>
+    <span
+      class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:hover:bg-white dark:text-black"
+    >
+      +{{ props.numPeople }}
+    </span>
+  </div>
+</template>

docs/src/example/avatarCircle/Demo.vue

@@ -0,0 +1,16 @@
+<script setup lang='ts'>
+import AvatarCircles from './AvatarCircles.vue'
+
+const avatarUrls = [
+  'https://github.com/selemondev.png',
+  'https://avatars.githubusercontent.com/u/20110627',
+  'https://avatars.githubusercontent.com/u/106103625',
+  'https://avatars.githubusercontent.com/u/59228569',
+]
+</script>
+
+<template>
+  <div class="grid place-items-center w-full min-h-screen">
+    <AvatarCircles :num-people="99" :avatar-urls="avatarUrls" />
+  </div>
+</template>