Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 2x 2x 2x 2x 2x 6x 6x 6x 6x 6x 6x 6x 5x 2x 2x 2x 2x 4x 4x 4x 4x 4x 4x 3x 2x 2x 2x 2x 6x 6x 6x 6x 6x 6x 6x 5x 2x | import React from 'react';
import { cn } from '../lib/utils';
type AvatarProps = React.HTMLAttributes<HTMLDivElement>;
type AvatarImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
type AvatarFallbackProps = React.HTMLAttributes<HTMLDivElement>;
// Avatar Container
export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
({ className, children, ...props }, ref) => (
<div
ref={ref}
className={cn(
'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
className
)}
{...props}
>
{children}
</div>
)
);
Avatar.displayName = 'Avatar';
// Avatar Image
export const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(
({ src, alt, className, ...props }, ref) => (
<img
ref={ref}
src={src}
alt={alt}
className={cn('aspect-square h-full w-full', className)}
{...props}
/>
)
);
AvatarImage.displayName = 'AvatarImage';
// Avatar Fallback
export const AvatarFallback = React.forwardRef<
HTMLDivElement,
AvatarFallbackProps
>(({ className, children, ...props }, ref) => (
<div
ref={ref}
className={cn(
'flex h-full w-full items-center justify-center rounded-full bg-muted',
className
)}
{...props}
>
{children}
</div>
));
AvatarFallback.displayName = 'AvatarFallback';
|