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

import React from 'react';
import './Component.scss';
import { Button } from 'antd';
import styled from 'styled-components';
import FocusButton from "../UsersList/focus_button";
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';

const Img = styled.img`{
  border-radius:50%;
  width:50px;
  height:50px;
  margin-right:14px;
}`
const Name = styled.div`{
  color:#5091FF;
  font-size:16px;
  height:22px;
  line-height:22px;
  margin-bottom:7px;
}`
const Time = styled.div`{
  color:#888;
  font-size:12px;
  height:16px;
  line-height:16px;
  margin-bottom:9px;
  display:flex;
  align-item:center;
}`
const I = styled.i`{
  font-size:13px!important;
  color:#60B25E;
  margin-right:2px;
  height:17px;
  line-height:17px;
}`
const Div = styled.div`{
  margin-bottom: 18px;
  padding:20px 16px;
  display: flex;
  align-items: center;
  border:1px solid #eee;
}`
export default (({ user , img, name, time, focusStatus, is_current_user, login , successFunc }) => {
  return (
    <Div>
      <Link to={`/${user && user.login}`}><Img src={getImageUrl(`/${img}`)} /></Link>
      <div className="m-infos">
        <Link to={`/${user && user.login}`}><Name>{name}</Name></Link>
        <Time><I className="iconfont icon-shijian"></I>加入时间:{time}</Time>
        {
          is_current_user ?
          <Button type="default">当前用户</Button>
          : 
          <FocusButton is_watch={focusStatus} id={login} successFunc={successFunc} notReset={true}/>
        }
      </div>
    </Div>
  )
})