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