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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 6x 56x 56x 6x 6x 33x 33x 6x 6x 54x 54x 6x | import type { ComponentPropsWithoutRef, ComponentRef } from 'react';
import { forwardRef } from 'react';
import { Root, Image, Fallback } from '@radix-ui/react-avatar';
import { cn } from '@/lib/utils';
const Avatar = forwardRef<
ComponentRef<typeof Root>,
ComponentPropsWithoutRef<typeof Root>
>(({ className, ...props }, ref) => {
const avatarStyles = [
// Layout
'relative flex',
// Sizing
'h-10 w-10 shrink-0',
// Appearance
'overflow-hidden rounded-full',
'border border-border bg-background',
];
return (
<Root
ref={ref}
className={cn(avatarStyles.join(' '), className)}
{...props}
/>
);
});
Avatar.displayName = Root.displayName;
const AvatarImage = forwardRef<
ComponentRef<typeof Image>,
ComponentPropsWithoutRef<typeof Image>
>(({ className, ...props }, ref) => {
const imageStyles = [
// Sizing
'aspect-square h-full w-full',
];
return (
<Image
ref={ref}
className={cn(imageStyles.join(' '), className)}
{...props}
/>
);
});
AvatarImage.displayName = Image.displayName;
const AvatarFallback = forwardRef<
ComponentRef<typeof Fallback>,
ComponentPropsWithoutRef<typeof Fallback>
>(({ className, ...props }, ref) => {
const fallbackStyles = [
// Layout
'flex h-full w-full items-center justify-center',
// Appearance
'rounded-full bg-muted',
];
return (
<Fallback
ref={ref}
className={cn(fallbackStyles.join(' '), className)}
{...props}
/>
);
});
AvatarFallback.displayName = Fallback.displayName;
export { Avatar, AvatarImage, AvatarFallback };
|