Sha256: 33e4dc95a99b08bdf886a53375c2343b81908b554ea4d8b40f54b5eec7eefa0e

Contents?: true

Size: 1.45 KB

Versions: 3

Compression:

Stored size: 1.45 KB

Contents

/* @flow */

import React from 'react';
import classnames from 'classnames';

import {
  Title,
  Body,
  Avatar
} from '../'

type UserProps = {
  className?: String,
  id?: String,
  name: String,
  territory?: String,
  title?: String,
  size?: 'sm' | 'md' | 'lg',
  align?: 'left' | 'center' | 'right',
  orientation?: 'horiztonal' | 'vertical',
  avatar?: Boolean,
  avatarUrl?: String,
}

const userSizes = {
  sm: 4,
  md: 4,
  lg: 3,
}

const avatarSizes = {
  sm: 'sm',
  md: 'md',
  lg: 'xl',
}

const User = (props: UserProps) => {
  const {
    name='Anna Black',
    territory='',
    title='',
    align='left',
    orientation='horizontal',
    size='sm',
    avatar=false,
    avatarUrl,
  } = props 

  const print_avatar = (avatar, avatarUrl) => {
    if (avatar == true | avatarUrl != null ) {
      return (
        <Avatar name={name} size={avatarSizes[size]} image_url={avatarUrl}/>
      )
    }
  }

  const print_details = (territory="") => {
    if (territory !== "") {
      return (
        <Body color='light'>{`${territory} • ${title}`}</Body>
      )
    }
    else {
      return (
        <Body color='light'>{`${title}`}</Body>
      )
    }
  }

  return (
    <div className={`pb_user_kit_${align}_${orientation}_${size}`}>
      {print_avatar(avatar, avatarUrl)}
      <div className="content_wrapper">
        <Title size={userSizes[size]} text={`${name}`}/>
        {print_details(territory)}
      </div>
    </div> 
  )
}

export default User;

Version data entries

3 entries across 3 versions & 1 rubygems

Version Path
playbook_ui-3.1.0 app/pb_kits/playbook/pb_user/_user.jsx
playbook_ui-3.0.1 app/pb_kits/playbook/pb_user/_user.jsx
playbook_ui-3.0.0 app/pb_kits/playbook/pb_user/_user.jsx