forgeplus-react/src/forge/Main/IndexItem.js

73 lines
2.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, { Component } from 'react';
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';
import '../css/index.css'
import './list.css';
import img_parise from '../Images/parise.png';
class IndexItem extends Component {
TurnToDetail = (login, url) => {
this.props.history.push({
pathname: url,
state: login
})
}
render() {
const { projects } = this.props;
const renderList = (
projects && projects.length > 0 ? projects.map((item, key) => {
return (
<div className="p-r-Item" key={key}>
<Link to={`/users/${item.author.login}/projects`} className="show-user-link">
<img className="p-r-photo" alt="" src={getImageUrl(`images/${item.author && item.author.image_url}`)} ></img>
</Link>
<div className="p-r-Infos">
<div className="p-r-name">
<Link to={`/projects/${item.id}/coders`} className="hide-1 color-grey-3 font-18 task-hide " style={{ whiteSpace: "wrap", display: 'flex', width: 400 }}>
{item.author.name}/{item.name}
{
item.forked_from_project_id ?
<span className="ml5">
<i className="iconfont icon-fork font-18 color-orange" />
</span>
: ""
}
{
item.type && item.type !== 0 &&
<span className="ml5">
<i className="iconfont icon-banbenku font-18 color-green" />
</span>
}
</Link>
{
item.is_public ? "" :
<span className="p-r-tags"><span>私有</span></span>
}
<span className="p-r-tags">
<span className="pariseTag"><img src={img_parise} alt="" className="pariseImg" /> ({item.praises_count})</span>
<span><i className="iconfont icon-fork mr3 font-16" style={{ color: "#1B8FFF" }} />fork ({item.forked_count})</span>
</span>
</div>
<p className="break_word task-hide-2 mt10" style={{ maxHeight: "40px" }}>{item.description}</p>
<div className="p-r-about">
<span className="p-r-detail">
<span><label>浏览量</label>{item.visits}</span>
{item.category && item.category.id && <span><label>项目类别</label>{item.category.name}</span>}
{item.last_update_time ? <span ><label>更新于</label>{item.time_ago}</span> : ""}
{item.language && item.language.id ? <span className="color-grey-3">{item.language.name}</span> : ""}
</span>
</div>
</div>
</div>
)
}) : ""
)
return (
<div className="project-list">
{renderList}
</div>
)
}
}
export default IndexItem;