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.
 
 
 

68 lines
2.1 KiB

import React, { Component } from "react";
import { Link } from "react-router-dom";
import VideoBox from "../../QR/VideoBox/index.js";
import VoiceBox from "../../QR/VoiceBox/index.js";
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 28 : window.innerWidth / 45,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
a: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
content: {
h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
},
},
};
export default class SingleBlog extends Component {
render() {
const { height, data } = this.props;
return (
<div style={{ height: height }} className="single-blog d-flex">
<div className="single-blog__right d-flex flex-column justify-content-center">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
<p style={{ fontSize: fontSize.desktop.p }}>{data.text}</p>
<Link
style={{ fontSize: fontSize.desktop.a }}
to={"/blogs/" + data.id}
>
ادامه مطلب
</Link>
</div>
<div
className="single-blog__left d-flex justify-content-center align-items-center"
style={{ width: "100%", height: "100%" }}
>
{data.id ? <Identifier data={data} fontSize={fontSize} /> : null}
{data.video ? <video sourcce={data.video} /> : null}
</div>
</div>
);
}
}
const Identifier = (props) => {
const { data } = props;
return (
<>
{data.type === "audio" ? (
<VoiceBox fontSize={props.fontSize} data={data} />
) : null}
{data.type === "video" ? (
<VideoBox fontSize={props.fontSize} data={data} />
) : null}
{data.type === "image" ? (
<img
src={"https://dnvn.ir/api/v1/file/" + data.fileIds}
alt={data.fileIds}
/>
) : null}
</>
);
};