Lighthouse/src/Shared/Components.jsx

import React from 'react'
import cl from 'classnames'
import { Link } from 'react-router-dom'

export const Icon = ({ name, size, intent, className, ...otherProps }) => {
    const classes = cl({
        [`pt-icon-${size}`]: size,
        [`pt-icon-${name}`]: name,
        [`pt-intent-${intent}`]: intent,
        [className]: true
    })
    return <span className={classes} {...otherProps}></span>
}

export const Card = ({ className, children, interactive, ...otherProps }) => 
    <div className={cl(["pt-card", className, {'pt-interactive': interactive}])} {...otherProps}>{children}</div>

export const Placeholder = ({ iconName, title, description, ...otherProps }) => 
    <div className="pt-non-ideal-state" {...otherProps} >
        <div className="pt-non-ideal-state-visual pt-non-ideal-state-icon">
            <span className={`pt-icon pt-icon-${iconName}`}></span>
        </div>
        <h4 className="pt-non-ideal-state-title">{title}</h4>
        <div className="pt-non-ideal-state-description">
            {description}
        </div>
    </div>

export const MenuLink = ({ to, iconName, children, ...otherProps }) => {
    let classes = cl(["pt-menu-item","pt-popover-dismiss", {[`pt-icon-${iconName}`]: iconName}]);
    return <li><Link to={to} className={classes} {...otherProps}>{children}</Link></li>
}

export const ProfilePic = ({ src }) => src ? <img src={src} /> :
    <Placeholder iconName="mugshot" title="No picture" description="Click to change"/>