import React from 'react';

export const Default = () => {
  return (
    <div className='flex items-center space-x-3'>
      <div className='group'>
        <img className='w-28 h-28 rounded-lg group-hover:scale-105 duration-200' src="your-img-url" alt="default avatar rounded-lg" />
      </div>
      <div className='group'>
        <img className='w-28 h-28 rounded-2xl group-hover:scale-105 duration-200' src="your-img-url" alt="default avatar rounded-2xl" />
      </div>
      <div className='group'>
        <img className='w-28 h-28 rounded-full group-hover:scale-105 duration-200' src="your-img-url" alt="default avatar rounded-full" />
      </div>
    </div>
  );
};

import React from 'react';
import { MdVerified, MdEdit } from 'react-icons/md';

export const Icon = () => {
  return (
    <div className="flex items-center space-x-3">
      <div className="relative group">
        <img
          className="w-28 h-28 rounded-full group-hover:scale-105 duration-200"
          src="your-img-url"
          title='Verified avatar user'
          alt="default avatar rounded-full"
        />
        <div className="absolute bottom-1 -right-1 bg-white rounded-full">
          <MdVerified className="text-2xl text-[#019eeb]" />
        </div>
      </div>
      <div className="relative group">
        <img
          className="w-28 h-28 rounded-full group-hover:scale-105 duration-200"
          src="your-img-url"
          title='Unread messages'
          alt="default avatar rounded-full"
        />
        <div className="absolute bottom-1 -right-1 flex items-center justify-center bg-yellow-400 w-7 h-7 rounded-full">
          <small className="text-xs text-primary font-medium">321</small>
        </div>
      </div>
      <div className="relative group">
        <img
          className="w-28 h-28 rounded-full group-hover:scale-105 duration-200"
          src="your-img-url"
          title='Edit user'
          alt="default avatar rounded-full"
        />
        <div className="absolute bottom-1 -right-1 bg-blue-500 w-7 h-7 flex items-center justify-center rounded-full">
          <MdEdit className="text-lg text-white" />
        </div>
      </div>
      <div className="relative group">
        <img
          className="w-28 h-28 rounded-full group-hover:scale-105 duration-200"
          src="your-img-url"
          title='Online user'
          alt="default avatar rounded-full"
        />
        <div className="absolute bottom-1 -right-1 bg-[#019eeb] w-7 h-7 rounded-full" />
      </div>
    </div>
  );
};

import React from 'react';

export const Stacked = () => {
  return (
    <div className="flex items-center -space-x-4">
      <span>
        <img
          className="w-20 h-20 rounded-full group-hover:scale-105 duration-200"
          src="your-image-url"
          alt="default avatar rounded-full"
        />
      </span>
      <span>
        <img
          className="w-20 h-20 rounded-full group-hover:scale-105 duration-200"
          src="your-image-url"
          alt="default avatar rounded-full"
        />
      </span>
      <span>
        <img
          className="w-20 h-20 rounded-full group-hover:scale-105 duration-200"
          src="your-image-url"
          alt="default avatar rounded-full"
        />
      </span>
      <span>
        <img
          className="w-20 h-20 rounded-full group-hover:scale-105 duration-200"
          src="your-image-url"
          alt="default avatar rounded-full"
        />
      </span>
    </div>
  );
};