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.
150 lines
5.1 KiB
150 lines
5.1 KiB
import React, { Component } from "react"; |
|
import { Link } from "react-router-dom"; |
|
import music from "~/assets/images/music.jpg"; |
|
import video from "~/assets/images/film.jpg"; |
|
import moment from "jalali-moment"; |
|
|
|
import "./index.scss"; |
|
|
|
const maxDesktopSize = 1250; |
|
|
|
const fontSize = { |
|
desktop: { |
|
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 80, |
|
h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95, |
|
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 110, |
|
a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 90, |
|
}, |
|
}; |
|
|
|
const colors = [ |
|
{ name: "علمی تخیلی", color: "red" }, |
|
{ name: "سیاسی", color: "blue" }, |
|
{ name: "تاریخی", color: "orange" }, |
|
{ name: "ورزشی", color: "yellow" }, |
|
]; |
|
export default class Simple extends Component { |
|
render() { |
|
const { height, data } = this.props; |
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
<article |
|
className="slider-blog d-flex flex-column" |
|
style={{ |
|
height: height, |
|
}} |
|
> |
|
<Link to={`/blogs/${data.id}`}> |
|
{data.type === "image" ? ( |
|
<img |
|
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} |
|
alt={data.title} |
|
/> |
|
) : null} |
|
{data.type === "video" ? ( |
|
<img src={video} alt={data.title} /> |
|
) : null} |
|
{data.type === "audio" ? ( |
|
<img src={music} alt={data.title} /> |
|
) : null} |
|
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1> |
|
<h2 style={{ fontSize: fontSize.desktop.h2 }}> |
|
<div |
|
dangerouslySetInnerHTML={{ __html: data.text }} |
|
style={{ height: 80, overflow: "hidden" }} |
|
></div> |
|
</h2> |
|
<div className="slider-blog__footer d-flex mt-3"> |
|
<div className="d-flex"> |
|
{/* <img src={} /> */} |
|
<div className="d-flex flex-column"> |
|
<span style={{ fontSize: fontSize.desktop.span }}> |
|
مطالعه کامل در {data.duration} دقیقه |
|
</span> |
|
<span style={{ fontSize: fontSize.desktop.span }}> |
|
تاریخ انتشار {moment(data.createdAt).format("YYYY/MM/DD")} |
|
</span> |
|
</div> |
|
</div> |
|
<Link |
|
style={{ fontSize: fontSize.desktop.a }} |
|
to={`/blogs/${data.id}`} |
|
> |
|
ادامه مطلب |
|
</Link> |
|
</div> |
|
<span |
|
className="slider-blog__category" |
|
style={{ |
|
backgroundColor: |
|
colors.filter((item) => item.name === data.tag)[0]?.color || |
|
"#33333366", |
|
fontSize: fontSize.desktop.span, |
|
}} |
|
> |
|
{data.tag} |
|
</span> |
|
</Link> |
|
</article> |
|
) : null} |
|
{window.innerWidth < 1000 ? ( |
|
<article |
|
className="mobile-slider-blog d-flex flex-column" |
|
style={{ |
|
height: height, |
|
}} |
|
> |
|
<Link to={`/blogs/${data.id}`}> |
|
{data.type === "image" ? ( |
|
<div style={{ textAlign: "center" }}> |
|
<img |
|
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} |
|
alt={data.title} |
|
/> |
|
</div> |
|
) : null} |
|
{data.type === "video" ? ( |
|
<img src={video} alt={data.title} /> |
|
) : null} |
|
{data.type === "audio" ? ( |
|
<img src={music} alt={data.title} /> |
|
) : null} |
|
<h1>{data.title}</h1> |
|
|
|
<h2> |
|
<div |
|
dangerouslySetInnerHTML={{ __html: data.text }} |
|
style={{ height: 80, overflow: "hidden" }} |
|
></div> |
|
</h2> |
|
<div className="mobile-slider-blog__footer d-flex mt-3"> |
|
<div className="d-flex"> |
|
{/* <img src={} /> */} |
|
<div |
|
className="d-flex flex-column" |
|
style={{ fontSize: "12px" }} |
|
> |
|
<span>مطالعه کامل در {data.duration} دقیقه</span> |
|
<span> |
|
تاریخ انتشار {moment(data.createdAt).format("YYYY/MM/DD")} |
|
</span> |
|
</div> |
|
</div> |
|
<Link to={`/blogs/${data.id}`}> |
|
{data.buttonText || "ادامه مطلب"} |
|
</Link> |
|
</div> |
|
<span |
|
className="mobile-slider-blog__category" |
|
// style={{ backgroundColor: data.category.color }} |
|
> |
|
{data.tag} |
|
</span> |
|
</Link> |
|
</article> |
|
) : null} |
|
</> |
|
); |
|
} |
|
}
|
|
|