66 lines
2.8 KiB
TypeScript
66 lines
2.8 KiB
TypeScript
|
import { Avatar, AvatarFallback, AvatarImage } from "@repo/shadcn-ui/components";
|
||
|
|
|
||
|
|
export function AvatarDemo() {
|
||
|
|
return (
|
||
|
|
<div className='flex flex-row flex-wrap items-center gap-4'>
|
||
|
|
<Avatar>
|
||
|
|
<AvatarImage src='https://github.com/shadcn.png' alt='@shadcn' />
|
||
|
|
<AvatarFallback>CN</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<Avatar>
|
||
|
|
<AvatarFallback>CN</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<Avatar className='size-12'>
|
||
|
|
<AvatarImage src='https://github.com/shadcn.png' alt='@shadcn' />
|
||
|
|
<AvatarFallback>CN</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<Avatar className='rounded-lg'>
|
||
|
|
<AvatarImage src='https://github.com/evilrabbit.png' alt='@evilrabbit' />
|
||
|
|
<AvatarFallback>ER</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<div className='*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale'>
|
||
|
|
<Avatar>
|
||
|
|
<AvatarImage src='https://github.com/shadcn.png' alt='@shadcn' />
|
||
|
|
<AvatarFallback>CN</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<Avatar>
|
||
|
|
<AvatarImage src='https://github.com/leerob.png' alt='@leerob' />
|
||
|
|
<AvatarFallback>LR</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<Avatar>
|
||
|
|
<AvatarImage src='https://github.com/evilrabbit.png' alt='@evilrabbit' />
|
||
|
|
<AvatarFallback>ER</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
</div>
|
||
|
|
<div className='*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale'>
|
||
|
|
<Avatar>
|
||
|
|
<AvatarImage src='https://github.com/shadcn.png' alt='@shadcn' />
|
||
|
|
<AvatarFallback>CN</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<Avatar>
|
||
|
|
<AvatarImage src='https://github.com/leerob.png' alt='@leerob' />
|
||
|
|
<AvatarFallback>LR</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<Avatar>
|
||
|
|
<AvatarImage src='https://github.com/evilrabbit.png' alt='@evilrabbit' />
|
||
|
|
<AvatarFallback>ER</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
</div>
|
||
|
|
<div className='*:data-[slot=avatar]:ring-background flex -space-x-2 hover:space-x-1 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale *:data-[slot=avatar]:transition-all *:data-[slot=avatar]:duration-300 *:data-[slot=avatar]:ease-in-out'>
|
||
|
|
<Avatar>
|
||
|
|
<AvatarImage src='https://github.com/shadcn.png' alt='@shadcn' />
|
||
|
|
<AvatarFallback>CN</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<Avatar>
|
||
|
|
<AvatarImage src='https://github.com/leerob.png' alt='@leerob' />
|
||
|
|
<AvatarFallback>LR</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<Avatar>
|
||
|
|
<AvatarImage src='https://github.com/evilrabbit.png' alt='@evilrabbit' />
|
||
|
|
<AvatarFallback>ER</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|