72 lines
1.9 KiB

import React from "react";
import Avatar from "@mui/material/Avatar";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import _ from "lodash";
function Course({ data, theme, setActiveBook }: any) {
return (
<>
<div
className={_.join(
[
"home-courses-course desktop flex-column",
theme === "light"
? "home-courses-course-light"
: "home-courses-course-dark",
],
" "
)}
onClick={() => setActiveBook(data)}
draggable={"false"}
>
<img
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
alt={data.name}
draggable={"false"}
/>
<footer className="d-flex">
<Avatar
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
style={{ width: 40, height: 40 }}
/>
<div className="home-courses-course__info d-flex flex-column">
<h2>{data.name}</h2>
</div>
</footer>
</div>
<Link
to={`/courses/${data.id}`}
className={_.join(
[
"home-courses-course mobile flex-column",
theme === "light"
? "home-courses-course-light"
: "home-courses-course-dark",
],
" "
)}
draggable={"false"}
>
<img
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
alt={data.name}
draggable={"false"}
/>
<footer className="d-flex">
<Avatar
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
style={{ width: 40, height: 40 }}
/>
<div className="home-courses-course__info d-flex flex-column">
<h2>{data.name}</h2>
</div>
</footer>
</Link>
</>
);
}
export default connect((state: any) => ({
theme: state.publicApi.theme,
}))(Course);