avatar

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5 
6type Props = HTMLAttributes<"div"> & {
7  size?: "default" | "sm" | "lg"
8}
9 
10const { class: className, size = "default", ...props } = Astro.props
11---
12 
13<div
14  data-slot="avatar"
15  data-size={size}
16  class={cn(
17    "after:border-border group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
18    className
19  )}
20  {...props}
21>
22  <slot />
23</div>