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.
37 lines
1.2 KiB
37 lines
1.2 KiB
import React from "react"; |
|
import Avatar from "@material-ui/core/Avatar"; |
|
import {Link} from 'react-router-dom'; |
|
import "./index.scss"; |
|
|
|
export default function Course(props: any) { |
|
const { data } = props; |
|
return ( |
|
<Link to={'/'} className="home-courses-course d-flex flex-column" draggable={'false'}> |
|
<img src={data.imageUrl} alt={data.name} draggable={'false'} /> |
|
<footer className="d-flex"> |
|
<Avatar src={data.user} style={{ width: 40, height: 40 }} /> |
|
<div className="home-courses-course__info d-flex flex-column"> |
|
<h2>{data.name}</h2> |
|
{window.innerWidth > 1007 ? ( |
|
<p>{data.text.slice(0, 100)}</p> |
|
) : ( |
|
<p>{data.text.slice(0, 50)}</p> |
|
)} |
|
|
|
<ul className="d-flex flex-wrap"> |
|
{data.tags.length <= 2 |
|
? data.tags.map((item: String, i: any) => <li key={i}>{item}</li>) |
|
: null} |
|
{data.tags.length > 2 ? ( |
|
<> |
|
<li key={1}>{data.tags[0]}</li> |
|
<li key={2}>{data.tags[1]}</li> |
|
<li key={3}>+</li> |
|
</> |
|
) : null} |
|
</ul> |
|
</div> |
|
</footer> |
|
</Link> |
|
); |
|
}
|
|
|