React

npm install @grasco/profile-picture

import { ProfilePicture, ProfilePictureGroup, setCdnBaseUrl } from '@grasco/profile-picture';

import { ProfilePicture, ProfilePictureGroup, setCdnBaseUrl } from '@grasco/profile-picture';
import { useEffect } from 'react';

export function UserAvatar() {
  useEffect(() => {
    setCdnBaseUrl('https://api.grasco.dev');
  }, []);

  return (
    <ProfilePicture
      extCustomerId="demo-user-1769431807927-pd9dtmn1"
      alt="Kerry Nicholson"
      size="xl"
      variant="circle"
      border
      borderColor="white"
      shadow="md"
      presence={{ status: 'online', animate: true }}
      badge={{ content: 3, position: 'top-right', bgColor: '#ef4444' }}
      interactive={{ hoverable: true, pressable: true }}
      onClick={(detail) => console.log('Clicked:', detail)}
    />
  );
}

export function TeamMembers({ users }) {
  return (
    <ProfilePictureGroup
      max={4}
      size="lg"
      showAddButton
      onAvatarClick={(user) => console.log('User:', user.name)}
      onAddClick={() => console.log('Add member')}
    >
      {users.map(user => (
        <ProfilePicture
          key={user.id}
          src={user.avatar}
          alt={user.name}
          data-user-id={user.id}
          data-status={user.status}
        />
      ))}
    </ProfilePictureGroup>
  );
}

import type { Size, Variant, PresenceStatus, BadgeConfig } from '@grasco/profile-picture';