Avatar

import React from 'react';
import { Avatar } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center">
      <Avatar />
    </div>
  );
}

import React from 'react';
import { Avatar } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Avatar alt='Eren Yeager' src='/eren-jaeger.webp' />
      <Avatar alt='Mikasa Ackerman' src='/mikasa-ackermen.jpg' />
      <Avatar alt='Armin' src='/armin.jpg' />
    </div>
  );
}

import React from 'react';
import { Avatar } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Avatar>H</Avatar>
      <Avatar className='bg-primary'>N</Avatar>
      <Avatar className='bg-secondary'>P</Avatar>
      <Avatar className='bg-success'>R</Avatar>
    </div>
  );
}

import React from 'react';
import { Avatar } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Avatar variant='square' className='bg-secondary'>
        S
      </Avatar>
      <Avatar variant='rounded' className='bg-info'>
        R
      </Avatar>
      <Avatar variant='circular' className='bg-warning'>
        C
      </Avatar>
    </div>
  );
}

import React from 'react';
import { Avatar } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Avatar alt='Naruto' src='/naruto-uzumaki.webp' size='lg' />
      <Avatar alt='Naruto' src='/naruto-uzumaki.webp' size='md' />
      <Avatar alt='Naruto' src='/naruto-uzumaki.webp' size='sm' />
    </div>
  );
}

import React from 'react';
import { Avatar } from 'archi-ui'
import { ClipboardList, Heart, Tag } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Avatar variant='square' className='bg-info'>
        <Heart />
      </Avatar>
      <Avatar variant='rounded' className='bg-primary'>
        <Tag />
      </Avatar>
      <Avatar variant='circular' className='bg-secondary'>
        <ClipboardList />
      </Avatar>
    </div>
  );
}

import React from 'react';
import { Avatar } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      // children is used here for fallback
      <Avatar alt='Eren Yeager' src='/broken-image.jpg' className='bg-error'>B</Avatar>
      // alt is used here for fallback
      <Avatar alt='Mikasa Ackerman' src='/broken-image.jpg' className='bg-success' />
      // a generic avatar icon is used here for fallback
      <Avatar src='broken-image.jpg' className='bg-secondary' />
    </div>
  );
}

import React from 'react';
import { Avatar, AvatarGroup } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center">
      <AvatarGroup max={4}>
        <Avatar alt='Eren Yeager' src='/eren-jaeger.webp' />
        <Avatar alt='Mikasa Ackerman' src='/mikasa-ackermen.jpg' />
        <Avatar alt='Armin' src='/armin.jpg' />
        <Avatar alt='Levi Ackerman' src='/levi-ackermen.jpg' />
        <Avatar alt='Naruto Uzumaki' src='/naruto-uzumaki.webp' />
      </AvatarGroup>
    </div>
  );
}

import React from 'react';
import { Avatar, AvatarGroup } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-2">
      <AvatarGroup variant='circular' size='lg' outlined={true}>
        <Avatar alt='Eren Yeager' src='/eren-jaeger.webp' />
        <Avatar alt='Mikasa Ackerman' src='/mikasa-ackermen.jpg' />
        <Avatar alt='Armin' src='/armin.jpg' />
        <Avatar alt='Levi Ackerman' src='/levi-ackermen.jpg' />
      </AvatarGroup>
      <AvatarGroup variant='circular' size='md' outlined={true}>
        <Avatar alt='Eren Yeager' src='/eren-jaeger.webp' />
        <Avatar alt='Mikasa Ackerman' src='/mikasa-ackermen.jpg' />
        <Avatar alt='Armin' src='/armin.jpg' />
        <Avatar alt='Levi Ackerman' src='/levi-ackermen.jpg' />
      </AvatarGroup>
      <AvatarGroup variant='circular' size='sm' outlined={true}>
        <Avatar alt='Eren Yeager' src='/eren-jaeger.webp' />
        <Avatar alt='Mikasa Ackerman' src='/mikasa-ackermen.jpg' />
        <Avatar alt='Armin' src='/armin.jpg' />
        <Avatar alt='Levi Ackerman' src='/levi-ackermen.jpg' />
      </AvatarGroup>
    </div>
  );
}

import React from 'react';
import { Avatar, AvatarGroup } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center">
      <AvatarGroup total={24}>
        <Avatar alt='Eren Yeager' src='/eren-jaeger.webp' />
        <Avatar alt='Mikasa Ackerman' src='/mikasa-ackermen.jpg' />
        <Avatar alt='Armin' src='/armin.jpg' />
        <Avatar alt='Naruto' src='/naruto-uzumaki.webp' />
      </AvatarGroup>
    </div>
  );
}

"use client"
 
import React from 'react';
import { Avatar, AvatarGroup } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center">
      <AvatarGroup total={5500} renderSurplus={(surplus) => <span>+{surplus.toString()[0]}K</span>}>
        <Avatar alt='Naruto' src='/naruto-uzumaki.webp' />
        <Avatar alt='Eren Yeager' src='/eren-jaeger.webp' />
        <Avatar alt='Mikasa Ackerman' src='/mikasa-ackermen.jpg' />
        <Avatar alt='Armin' src='/armin.jpg' />
        <Avatar alt='Levi Ackerman' src='/levi-ackermen.jpg' />
      </AvatarGroup>
    </div>
  );
}

import React from 'react';
import { Avatar, AvatarGroup } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-2">
      <AvatarGroup spacing='lg'>
        <Avatar alt='Naruto' src='/naruto-uzumaki.webp' />
        <Avatar alt='Eren Yeager' src='/eren-jaeger.webp' />
        <Avatar alt='Mikasa Ackerman' src='/mikasa-ackermen.jpg' />
        <Avatar alt='Armin' src='/armin.jpg' />
      </AvatarGroup>
      <AvatarGroup spacing='md'>
        <Avatar alt='Naruto' src='/naruto-uzumaki.webp' />
        <Avatar alt='Eren Yeager' src='/eren-jaeger.webp' />
        <Avatar alt='Mikasa Ackerman' src='/mikasa-ackermen.jpg' />
        <Avatar alt='Armin' src='/armin.jpg' />
      </AvatarGroup>
      <AvatarGroup spacing='sm'>
        <Avatar alt='Naruto' src='/naruto-uzumaki.webp' />
        <Avatar alt='Eren Yeager' src='/eren-jaeger.webp' />
        <Avatar alt='Mikasa Ackerman' src='/mikasa-ackermen.jpg' />
        <Avatar alt='Armin' src='/armin.jpg' />
      </AvatarGroup>
    </div>
  );
}

import React from 'react';
import { Avatar, Badge } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <div className="relative inline-flex items-center">
        <Avatar size='lg' alt='Naruto' src='/naruto-uzumaki.webp' />
        <Badge variant='dot' color='success' className='absolute bottom-0 right-0 ring-1 ring-background' />
      </div>
      <div className="relative inline-flex items-center">
        <Avatar size='lg' alt='Levi Ackerman' src='/levi-ackermen.jpg' />
        <Badge badgeContent='1m' color='success' size='sm' className='absolute bottom-0 right-0 ring-1 py-0 ring-background' />
      </div>
      <div className="relative inline-flex items-center">
        <Avatar size='lg' alt='Eren Yeager' src='/eren-jaeger.webp' />
        <Badge badgeContent={<Avatar alt='Naruto' src='/naruto-uzumaki.webp' className='w-4 h-4 bg-secondary' />} className='absolute bottom-0 right-0 ring-1 ring-background p-0' />
      </div>
    </div>
  );
}