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

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>
);
}