How to use @pluralsight/ps-design-system-avatar - 7 common examples

{state.rows.sort(sortRows).map(row => (
              
                
                  
                  <div style="{{">
                    {row.name}
                  </div>
                
                
                  {row.courses}
                
                
                  {row.viewTime}m
                
              
            ))}

<code>
        import Avatar from '@pluralsight/ps-design-system-avatar'
      </code>

      medium,
            <span>
              avatar size (from <code>Avatar.sizes</code>)
            </span>
          ]),
          PropTypes.row([
            'src',
            'string',
            null,
            null,
            'URI or path to avatar image'
          ])
        ]}
      /&gt;

function AvatarLink(props) {
  const link = props.children
  const avatar = link.props.children

  return (
    
      {React.cloneElement(link, {
        children: React.cloneElement(avatar, { size: Avatar.sizes.xSmall })
      })}
    
  )
}
AvatarLink.propTypes = {

{props.actionBar.map((action, key) => {
        return React.cloneElement(action, { key })
      })}
    
  ) : null

  return (
    <div>
      {hasAside &amp;&amp; (
        <aside>
          {React.cloneElement(props.avatar, { size: Avatar.sizes.xSmall })}
        </aside>
      )}

      
        {hasHeading &amp;&amp; (
          <header>
            {props.heading &amp;&amp; {props.heading}}
            {actionBar}
          </header>
        )}

        {props.message}

        <footer>
          {hasMetadata &amp;&amp; (
            </footer></div>

]),
          PropTypes.row([
            'src',
            'string',
            null,
            null,
            'URI or path to avatar image'
          ])
        ]}
      />

      Size
      <p>Five avatar sizes are available.</p>
      
            ``
        )}
      /&gt;

      Default with initials
      <p>
        An avatar with a visual image is preferred. In cases where the image is
        unavailable or loading, initials of the person pictured will be
        displayed. Always provide the <code>name</code> prop as a fallback.
      </p>
      `,
          ``,

<ul>
          <li>
            }&gt;Path}
              title={Advanced TypeScript}
              progress={0}
              image={}
              metadata1={['Brice Wilson', 'Advanced']}
              metadata2={['0m watched']}
              size={Card.sizes.small}
            /&gt;
          </li>
          <li>
            }
              title={
                
                  Getting Started with Reactive Programming Using RxJS
                
              }
              progress={20}
              image={}
              metadata1={['Scott Allen', 'Intermediate']}
              metadata2={['23m watched']}
              size={Card.sizes.small}
            /&gt;
          </li>
          <li>
            </li></ul>

{state.rows.sort(sortRows).map(row => (
              
                
                  
                  <div style="{{">
                    {row.name}
                  </div>
                
                
                  {row.courses}
                
                
                  {row.viewTime}m
                
              
            ))}