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

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