You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
educoder/public/react/src/modules/moop_cases/CaseItem.js

48 lines
1.9 KiB

import React,{ Component } from "react";
import './css/moopCases.css'
import '../courses/css/Courses.css'
import { getUrl } from 'educoder';
import Tags from './CaseTags'
class CaseItem extends Component{
constructor(props){
super(props);
}
render(){
let { libraries } = this.props;
console.log(libraries)
return(
<div className="library-list-container">
{
libraries && libraries.map((item,key)=>{
return(
<li className="library_list_item">
<img alt={item.id} className="mr15 mt3 radius4" height="90" src={getUrl(`${item.cover_url}`)} width="120" />
<div className="flex1">
<p className="clearfix mb25 lineh-40">
<a href={`/moop_cases/${item.id}`} className="task-hide font-22 library_l_name">{item.title}</a>
<span className="fl mt10"><Tags tags={item.tags}></Tags></span>
</p>
<p className="clearfix lineh-20">
<span className="color-grey-3 mr10">{item.author_name}</span>
<span className="color-grey-3 mr20">{item.author_school_name}</span>
<span className="color-grey-c fr">
<span className="color-grey-c mr20"><span className=" item-group-icon mr5"><i className="fa fa-eye"></i></span>{item.visited_count} </span>
<span className="color-grey-c mr20"><span className=" item-group-icon mr5"><i className="fa fa-thumbs-o-up"></i></span>{item.praise_count} </span>
<span className="color-grey-c"><span className=" item-group-icon mr5"><i className="fa fa-download"></i></span>{item.download_count} </span>
</span>
</p>
</div>
</li>
)
})
}
</div>
)
}
}
export default CaseItem;