forgeplus-react/src/forge/Component/User.jsx

import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';

export default ({ url , name , column  , id , login })=>{
  const Img = styled.span`
    display:flex;
    font-weight: bold;
    ${column && "flex-direction: column;text-align:center;"}
    align-items: center;
    & img{
      width:30px;
      height:30px;
      border-radius:50%;
    }
    ${!column && `
      & span{
        margin-left:8px;
      }`
    }
  `;
  return(
    id?
    <Link to={`/${login}`}>
      <Img>
        { url && <img src={url} alt=""/> }
        <span>{name}</span>
      </Img>
    </Link>
    :
    <Img>
      { url && <img src={url} alt=""/> }
      <span>{name}</span>
    </Img>
  )
}