Lighthouse/src/Shared/Components.jsx

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

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

export const Placeholder = ({ iconName, title, description }) => 
    <div className="pt-non-ideal-state">
        <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>

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>
}