58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from '@workspace/ui/components/ui/avatar';
|
|
import {
|
|
AvatarGroup,
|
|
AvatarGroupTooltip,
|
|
} from '@/registry/components/avatar-group-mask';
|
|
|
|
const AVATARS = [
|
|
{
|
|
src: 'https://pbs.twimg.com/profile_images/1909615404789506048/MTqvRsjo_400x400.jpg',
|
|
fallback: 'SK',
|
|
tooltip: 'Skyleen',
|
|
},
|
|
{
|
|
src: 'https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg',
|
|
fallback: 'CN',
|
|
tooltip: 'Shadcn',
|
|
},
|
|
{
|
|
src: 'https://pbs.twimg.com/profile_images/1677042510839857154/Kq4tpySA_400x400.jpg',
|
|
fallback: 'AW',
|
|
tooltip: 'Adam Wathan',
|
|
},
|
|
{
|
|
src: 'https://pbs.twimg.com/profile_images/1783856060249595904/8TfcCN0r_400x400.jpg',
|
|
fallback: 'GR',
|
|
tooltip: 'Guillermo Rauch',
|
|
},
|
|
{
|
|
src: 'https://pbs.twimg.com/profile_images/1534700564810018816/anAuSfkp_400x400.jpg',
|
|
fallback: 'JH',
|
|
tooltip: 'Jhey',
|
|
},
|
|
];
|
|
|
|
export const AvatarGroupMaskDemo = () => {
|
|
return (
|
|
<div className="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-0.5 rounded-full">
|
|
<div className="bg-gradient-to-r from-indigo-100 via-purple-100 to-pink-100 dark:from-indigo-950 dark:via-purple-950 dark:to-pink-950 p-1.5 rounded-full">
|
|
<AvatarGroup>
|
|
{AVATARS.map((avatar, index) => (
|
|
<Avatar key={index}>
|
|
<AvatarImage src={avatar.src} />
|
|
<AvatarFallback>{avatar.fallback}</AvatarFallback>
|
|
<AvatarGroupTooltip>
|
|
<p>{avatar.tooltip}</p>
|
|
</AvatarGroupTooltip>
|
|
</Avatar>
|
|
))}
|
|
</AvatarGroup>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|