MicroClub Avatar

1'use client';
2 
3import * as React from 'react';
4import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
5 
6import { cn } from '@/lib/utils';
7 
8function McAvatar({
9  className,
10  size = 'default',
11  ...props
12}: AvatarPrimitive.Root.Props & {
13  size?: 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
14}) {
15  return (
16    <AvatarPrimitive.Root
17      data-slot="avatar"
18      data-size={size}
19      className={cn(
20        'group/avatar relative flex size-8 shrink-0 rounded-full  select-none ',
21        ' data-[size=xs]:size-6  data-[size=sm]:size-8 data-[size=md]:size-10 data-[size=lg]:size-12  data-[size=xl]:size-14 data-[size=2xl]:size-16 dark:after:mix-blend-lighten',
22        ' ring-1 ring-border ring-inset ',
23        className
24      )}
25      {...props}
26    />
27  );
28}
29 
30function McAvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
31  return (
32    <AvatarPrimitive.Image
33      data-slot="avatar-image"
34      className={cn('aspect-square size-full rounded-full object-cover ', className)}
35      {...props}
36    />
37  );
38}
39 
40function McAvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
41  return (
42    <AvatarPrimitive.Fallback
43      data-slot="avatar-fallback"
44      className={cn(
45        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ',
46        ' group-data-[size=xs]/avatar:text-xs group-data-[size=sm]/avatar:text-sm group-data-[size=md]/avatar:text-base group-data-[size=lg]/avatar:text-lg group-data-[size=xl]/avatar:text-xl group-data-[size=2xl]/avatar:text-2xl',
47        className
48      )}
49      {...props}
50    />
51  );
52}
53 
54function McAvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
55  return (
56    <span
57      data-slot="avatar-badge"
58      className={cn(
59        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none empty:bg-success not-empty:bg-transparent overflow-hidden',
60        'group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:[&>svg]:hidden',
61        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
62        'group-data-[size=md]/avatar:size-2.5 group-data-[size=md]/avatar:[&>svg]:size-2',
63        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
64        'group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2.5',
65// … truncated