2018-09-10 09:55:26 -07:00
|
|
|
import React from 'react';
|
2018-09-27 13:39:37 -07:00
|
|
|
import UserAvatar from 'components/UserAvatar';
|
2018-11-16 15:05:17 -08:00
|
|
|
import { User } from 'types';
|
2018-10-03 10:11:44 -07:00
|
|
|
import { Link } from 'react-router-dom';
|
2018-09-19 18:57:05 -07:00
|
|
|
import './style.less';
|
2018-09-10 09:55:26 -07:00
|
|
|
|
|
|
|
interface Props {
|
2018-11-16 15:05:17 -08:00
|
|
|
user: User;
|
2019-01-09 12:48:41 -08:00
|
|
|
extra?: React.ReactNode;
|
2018-09-10 09:55:26 -07:00
|
|
|
}
|
|
|
|
|
2019-03-06 12:25:58 -08:00
|
|
|
const Wrap = ({ user, children }: { user: User; children: React.ReactNode }) => {
|
2019-02-25 11:26:02 -08:00
|
|
|
if (user.userid) {
|
2019-03-06 12:25:58 -08:00
|
|
|
return (
|
|
|
|
<Link to={`/profile/${user.userid}`} className="UserRow" children={children} />
|
|
|
|
);
|
2019-02-25 11:26:02 -08:00
|
|
|
} else {
|
|
|
|
return <div className="UserRow" children={children} />;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-01-09 12:48:41 -08:00
|
|
|
const UserRow = ({ user, extra }: Props) => (
|
2019-02-25 11:26:02 -08:00
|
|
|
<Wrap user={user}>
|
2018-09-19 18:57:05 -07:00
|
|
|
<div className="UserRow-avatar">
|
2018-09-27 13:39:37 -07:00
|
|
|
<UserAvatar user={user} className="UserRow-avatar-img" />
|
2018-09-19 18:57:05 -07:00
|
|
|
</div>
|
|
|
|
<div className="UserRow-info">
|
2018-11-16 15:05:17 -08:00
|
|
|
<div className="UserRow-info-main">{user.displayName}</div>
|
2018-09-27 13:39:37 -07:00
|
|
|
<p className="UserRow-info-secondary">{user.title}</p>
|
2018-09-19 18:57:05 -07:00
|
|
|
</div>
|
2019-03-06 12:25:58 -08:00
|
|
|
{extra && <div className="UserRow-extra">{extra}</div>}
|
2019-02-25 11:26:02 -08:00
|
|
|
</Wrap>
|
2018-09-10 09:55:26 -07:00
|
|
|
);
|
|
|
|
|
|
|
|
export default UserRow;
|