<div id="react-page"></div>

.avatar{
    width: 55px;
    height: 55px;
    display: grid;
    place-content: center;
    background-color: azure;
    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    border: 0;
    border-radius: 5em;
    cursor: pointer;
    line-height: 1;
    position: relative;
    overflow: hidden;
}
.avatar-image{
    align-self: center;
    height: 100%;
    width: 100%;
    margin: 0 0;
    position: absolute;
    object-fit: cover;
}

.avatar--shape-square{
    border-radius: 0.75rem;
}

.avatar--shape-circle{
    border-radius: 5em;
}

.avatar--size-xs{
    height: 35px;
    width: 35px;
}

.avatar--size-sm{
    height: 45px;
    width: 45px;
}

.avatar--size-md{
    height: 55px;
    width: 55px;
}

.avatar--size-lg{
    height: 75px;
    width: 75px;
}

.avatar--size-xl{
    height: 100px;
    width: 100px;
}

.avatar--size-2xl{
    height: 125px;
    width: 125px;
}

import React from 'https://esm.sh/react@18.2.0'
import ReactDOM, {createRoot} from 'https://esm.sh/react-dom@18.2.0'
import * as typescript from "https://cdn.skypack.dev/typescript";

export interface AvatarProps {
    /**The username of the user */
    name: string;
    /** An optional image to appear for an avatar */
    image?: {
        src: string;
    };
    /** Determine if the avatar is circular or square */
    shape: 'circle' | 'square';
    /** The size of the avatar */
    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
}

document.addEventListener('DOMContentLoaded', function () {
  const container = document.getElementById('react-page');
  const root = createRoot(container);
  root.render(<Avatar name='John Smith'
    shape='circle'
    image={{
        src: 'https://images.unsplash.com/photo-1499952127939-9bbf5af6c51c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80'
    }} />);
});

export const Avatar = ({name,image,shape,size}:AvatarProps)=>{
    const initials = name.split(' ').map((word)=>word[0]).join('');
    return (
        <div className={['avatar',`avatar--shape-${shape}`, `avatar--size-${size}`].join(' ')}>
            {image ? <img className='avatar-image' src={image.src} alt={name}/> : <>{initials}</>}
        </div>
    )
}