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

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