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.
 
 
 

59 lines
1.9 KiB

import React from "react";
import moment from "jalali-moment";
import Reply from "./Reply/index";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
},
mobile: {
strong: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 20,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 27,
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
},
};
export default function Comment(props) {
const { comment } = props;
return (
<>
{window.innerWidth < 1000 ? (
<div className="mobile-comment d-flex flex-column">
<strong style={{ fontSize: fontSize.mobile.strong }}>
{comment.username}
</strong>
<p style={{ fontSize: fontSize.mobile.p }}>{comment.text}</p>
<span style={{ fontSize: fontSize.mobile.span }}>
{moment(comment.date).format("YYYY/MM/DD")}
</span>
</div>
) : null}
{window.innerWidth > 1000 ? (
<div className="comment d-flex flex-column mt-2">
<strong
className="comment__user"
style={{ fontSize: fontSize.desktop.strong }}
>
{comment.username || "حسین"}
</strong>
<p className="comment__text" style={{ fontSize: fontSize.desktop.p }}>
{comment.text}
</p>
<span
className="comment__date"
style={{ fontSize: fontSize.desktop.span }}
>
{moment(comment.date).format("YYYY/MM/DD")}
</span>
{comment.reply ? <Reply data={comment.reply} /> : null}
</div>
) : null}
</>
);
}