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.
101 lines
3.8 KiB
101 lines
3.8 KiB
import React from "react"; |
|
import { connect } from "react-redux"; |
|
import { Link } from "react-router-dom"; |
|
import Avatar from "../../../components/Avatar"; |
|
|
|
export const Single = ({ blog, isMobile }) => { |
|
return ( |
|
<Link |
|
to={"/blogs/" + blog?.id} |
|
className="flex flex-col lg:flex-row lg:gap-5 overflow-y-hidden" |
|
> |
|
<div |
|
className="w-full lg:w-1/2 rounded-md overflow-hidden relative" |
|
style={{ |
|
height: isMobile ? "" : "calc(100vh / 2)", |
|
minHeight: isMobile ? 200 : 300, |
|
}} |
|
> |
|
<img |
|
src={`https://dnvn.ir/api/v1/file/${blog?.fileIds}`} |
|
alt="" |
|
className="w-full h-full absolute left-0 top-0" |
|
/> |
|
<div className="flex flex-col justify-end bg-gradient-to-t from-black lg:hidden absolute top-0 left-0 z-10 w-full h-full pb-2 px-2"> |
|
<div className="w-full flex justify-between"> |
|
<div className="flex"> |
|
<Avatar size={40} /> |
|
<div className="flex flex-col py-2 mr-2 justify-center"> |
|
<strong className="text-gray-300 text-tiny font-bold"> |
|
{window.t("نوشته از:")} |
|
</strong> |
|
<p className="text-gray-300 mt-2 text-xs"> |
|
{window.t("سردبیر بخش وبلاگ دانوین ایزدی")} |
|
</p> |
|
</div> |
|
</div> |
|
<div className="flex flex-col justify-center items-end"> |
|
<span className="text-gray-300 text-sm"> |
|
{window.t("زمان مطالعه" + " " + "۳۰ دقیقه")} |
|
</span> |
|
<span className="mt-2 text-gray-300 text-sm font-bold"> |
|
{window.t("1400/11/24")} |
|
</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div className="flex flex-col lg:w-1/2 lg:pt-5 justify-between"> |
|
<div className="flex flex-col mt-3 lg:mt-0 "> |
|
<h1 className="lg:text-5xl font-bold leading-6 dark:text-gray-200"> |
|
{blog?.title} |
|
</h1> |
|
<p className="text-tiny leading-6 lg:text-tiny text-gray70 dark:text-gray-200 lg:w-4/5 mt-4 lg:mt-6 lg:leading-7"> |
|
{window.t( |
|
"پیش از بلعیدن طعمه اش، با آن بازی می کند. با این همه، ما تا آنجا که ممکن است، با علاقه فراوان" |
|
)} |
|
</p> |
|
</div> |
|
{!isMobile && ( |
|
<div className="w-full flex justify-between"> |
|
<div className="flex"> |
|
{!blog?.author.picFileId && <Avatar size={80} />} |
|
{blog?.author.picFileId && ( |
|
<img |
|
src={`https://dnvn.ir/api/v1/file/${blog?.author.picFileId}`} |
|
alt="" |
|
/> |
|
)} |
|
<div className="flex flex-col py-2 mr-2 justify-center"> |
|
<strong className="lg:text-xl lg:font-black text-gray1"> |
|
{window.t("نوشته از:")} |
|
{blog?.author.name} |
|
</strong> |
|
<p className="lg:text-tiny lg:font-semibold text-gray70 mt-3"> |
|
{blog?.author.role} |
|
</p> |
|
</div> |
|
</div> |
|
<div className="flex flex-col i justify-center items-end"> |
|
<span className="lg:text-tiny text-gray1 lg:font-black"> |
|
{window.t("زمان مطالعه" + " " + "۳۰ دقیقه")} |
|
</span> |
|
<span className="mt-3 lg:text-tiny text-gray1 lg:font-black"> |
|
{window.t("1400/11/24")} |
|
</span> |
|
</div> |
|
</div> |
|
)} |
|
</div> |
|
</Link> |
|
); |
|
}; |
|
|
|
const mapStateToProps = (state) => ({ |
|
blog: state.blog.list[0], |
|
isMobile: state.publicApi.isMobile, |
|
}); |
|
|
|
const mapDispatchToProps = {}; |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Single);
|
|
|