Avatar

import { Avatar } from '@raystack/apsara';

function UserProfile() {
  return (
    <Avatar
      src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9"
      alt="John Doe"
      fallback="JD"
    />
  );
}

import { Avatar } from '@raystack/apsara';

function InitialsAvatar() {
  return (
    <Avatar 
      fallback="JD" 
      color="indigo"
      variant="soft"
    />
  );
}

import { Avatar } from '@raystack/apsara';

function AvatarSizes() {
  return (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      <Avatar size={1} fallback="1" />
      <Avatar size={3} fallback="3" />
      <Avatar size={5} fallback="5" />
      <Avatar size={7} fallback="7" />
      <Avatar size={9} fallback="9" />
    </div>
  );
}

import { Avatar } from '@raystack/apsara';

function ColoredAvatars() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Avatar fallback="IN" color="indigo" />
      <Avatar fallback="OR" color="orange" />
      <Avatar fallback="MI" color="mint" />
      <Avatar fallback="SK" color="sky" />
      <Avatar fallback="PU" color="purple" />
    </div>
  );
}

import { Avatar } from '@raystack/apsara';

function AvatarVariants() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Avatar fallback="SO" variant="solid" color="indigo" />
      <Avatar fallback="SF" variant="soft" color="indigo" />
    </div>
  );
}

import { Avatar } from '@raystack/apsara';

function AvatarRadius() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Avatar fallback="SM" radius="small" />
      <Avatar fallback="FL" radius="full" />
    </div>
  );
}

import { Avatar, AvatarGroup } from '@raystack/apsara';

function TeamAvatars() {
  return (
    <AvatarGroup max={3}>
      <Avatar fallback="JD" color="indigo" />
      <Avatar fallback="JS" color="orange" />
      <Avatar fallback="BW" color="mint" />
      <Avatar fallback="AM" color="sky" />
      <Avatar fallback="KL" color="purple" />
    </AvatarGroup>
  );
}

import { Avatar, getAvatarColor } from '@raystack/apsara';

function DynamicAvatar({ email, name }: { email: string; name: string }) {
  const color = getAvatarColor(email);
  const initials = name.split(' ').map(n => n[0]).join('').toUpperCase();
  
  return (
    <Avatar 
      fallback={initials} 
      color={color}
    />
  );
}