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